建设网站的内容,《网站建设教程,南宁做网站外包,加强网站建设 统计局1.计算属性
初衷#xff1a;为了解决模块里面有太多的计算逻辑让模版难以维护。
计算属性可以依赖一个数据也可以依赖多个数据的变化
使用场景#xff1a;
商品单价和数量改变时#xff0c;商品总价更改。如果写在方法里面#xff0c;那么每次修改商品单价和数量时都会…1.计算属性
初衷为了解决模块里面有太多的计算逻辑让模版难以维护。
计算属性可以依赖一个数据也可以依赖多个数据的变化
使用场景
商品单价和数量改变时商品总价更改。如果写在方法里面那么每次修改商品单价和数量时都会去调用这个方法这种每次去调用都会消耗一部分性能对页面渲染并不友好。所以就可以使用计算属性计算属性可以使用缓存
2.计算属性的setter
计算属性不能在外部直接进行赋值如果想要给计算属性赋值就需要使用set/get方法而且计算属性里面使用对象写法。
如购物车里面商品全选按钮会根据商品是否全选中来决定是否被选中 el-checkbox sizemini v-modelcheckedAll/el-checkboxcheckedAll: {get() {return this.cartProducts.every(item item.isChecked);},set(newVal) {this.cartProducts.map(item (item.isChecked newVal));}}
3.计算属性的特性
1. 计算属性会被加入到vue实例
2. 计算属性所依赖的数据未发生变化结果会被缓存缓存依赖于数据的变化数据没有变化不会缓存下一次页面更新时首先会查看数据是否变化如果没有变化不会触发computed函数会直接读取缓存的内容
4.watch监听器
监听器适用于数据发生改变时做一些副作用相关的处理
5.watch相关api
可以监听data数据中的变量监听属性的方法可以是methods里的方法名可以使用deep:true对对象进行深度监听可以使用immediate: true在页面首次加载时就触发可以传入回调数组它们会被按顺序逐一调用可以只监听对象的某个属性 obj.a
var vm new Vue({data: {a: 1,b: 2,c: 3,d: 4,e: {f: {g: 5}}},watch: {a: function (val, oldVal) {console.log(new: %s, old: %s, val, oldVal)},// 方法名b: someMethod,// 该回调会在任何被侦听的对象的 property 改变时被调用不论其被嵌套多深对对象的深度监听c: {handler: function (val, oldVal) { /* ... */ },deep: true},// 该回调将会在侦听开始之后被立即调用页面加载时就触发d: {handler: someMethod,immediate: true},// 你可以传入回调数组它们会被按顺序逐一调用e: [handle1,function handle2 (val, oldVal) { /* ... */ },{handler: function handle3 (val, oldVal) { /* ... */ },/* ... */}],// watch vm.e.fs value: {g: 5}只监听对象的某个属性e.f: function (val, oldVal) { /* ... */ }},methods:{someMethod(){console.log(methods方法中监听);}}
})
vm.a 2 // new: 2, old: 1
6.watch可以处理异步
watch内部可以处理异步相关逻辑
7.计算属性computed和监听watch的区别
计算属性会进行缓存缓存是由数据变化决定。在页面下一次更新时首先会查看里面的字段是否有变化如果字段没有变化则不会触发会computed函数从上一次缓存中读取数据而watch不会进行缓存计算属性computed因为有return所以不能处理异步相关逻辑而watch可以处理异步相关逻辑computed首次加载就会触发缓存里面的内容但是watch如果要首次加载就触发需要使用immediate:true属性computed会对对象进行深度监听但是如果watch想进行深度监听需要使用deep:true属性
