vue中computed和watch的区别
1.computed的用法
是一个计算属性,类似于过滤器,对绑定到view的数据进行处理。computed上面的属性不可在vue data中声明,不能做异步处理
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
fullName不可在data里面定义,因为对应的computed作为计算属性定义fullName并返回对应的结果给这个变量,变量不可被重复定义和赋值。computed的属性还有get,和set方法。
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName:{
get(){
return this.firstName + ' ' + this.lastName
},
set(val){
//val就是fullName的最新属性值
}
}
}
2.watch的用法
watch 是对data上的数据做监听,数据发生了变化做一系列的操作。
data: {
firstName: 'Foo',
lastName: 'Bar',
obj: {
a:1
}
},
watch: {
// 简单属性的监听
firstName (newVal, oldVlue) {
// newVal 新值, oldVlue旧值
}
// 对象某个属性的监听
obj.a (newVal, oldVlue) {}
// 对象的监听,对象引用发生变化才会触发
obj (newVal, oldVlue) {}
// 对象所有属性进行监听
obj : {
handler(oldVal,newVal){
},
deep:true
}
}
vue中keep-alive的使用和新特性
1.props
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
<keep-alive include="test-keep-alive">
<!-- 将缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
<keep-alive include="a,b">
<!-- 将缓存name为a或者b的组件,结合动态组件使用 -->
<component :is="view"></component>
</keep-alive>
<!-- 使用正则表达式,需使用v-bind -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<keep-alive exclude="test-keep-alive">
<!-- 将不缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
2、结合router,缓存部分页面
使用$route.meta的keepAlive属性:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
//…router.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: '/World',
name: 'World',
component:World,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})
它是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
vue路由的实现原理
1.hash模式
http://www.xxx.com/#/home
这种 #。后面 hash 值的变化,并不会向浏览器发送请求,页面因此也不会刷新,hash值的改变会触发浏览器的hashchange事件,vue就是通过监听这个hashchange事件,进行dom处理和页面更新操作
function matchAndUpdate () {
// todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)
2.history 模式
14年后,因为HTML5标准发布。多了两个 API,pushState 和 replaceState,通过这两个 API 可以改变 url 地址且不会发送请求。同时触发 popstate 事件。通用了 HTML5 的实现,单页路由的 url 就不会多出一个#,变得更加美观。但因为没有 # 号,所以当用户刷新页面之类的操作时,浏览器还是会给服务器发送请求。所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。
function matchAndUpdate () {
// todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)
先写这么多。下篇研究下vue双向绑定原理,和vue3.0的新实现