建网站网络推广优势,0基础做网站多久,百度seo关键词优化费用,中恒建设职业技术培训学校网站computed#xff1a;通过属性计算而得来的属性 1、computed内部的函数在调用时不加()。 2、computed是依赖vm中data的属性变化而变化的#xff0c;也就是说#xff0c;当data中的属性发生改变的时候#xff0c;当前函数才会执行#xff0c;data中的属性没有改变的时候通过属性计算而得来的属性 1、computed内部的函数在调用时不加()。 2、computed是依赖vm中data的属性变化而变化的也就是说当data中的属性发生改变的时候当前函数才会执行data中的属性没有改变的时候当前函数不会执行。 3、computed中的函数必须用return返回。 4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了就是data中的属性发生改变从而触发computed中的函数形成死循环了。 5、当computed中的函数所依赖的属性没有发生改变那么调用当前函数的时候会从缓存中读取。 1. 支持缓存只有依赖数据发生改变才会重新进行计算 2. 不支持异步当computed内有异步操作时无效无法监听数据的变化 3.computed 属性值会默认走缓存计算属性是基于它们的响应式依赖进行缓存的也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 4. 如果一个属性是由其他属性计算而来的这个属性依赖其他属性是一个多对一或者一对一一般用computed 5.如果computed属性属性值是函数那么默认会走get方法函数的返回值就是属性的属性值在computed中的属性都有一个get和一个set方法当数据变化时调用set方法。 使用场景当一个值受多个属性影响的时候------------购物车商品结算 watch属性监听 1、watch中的函数名称必须要和data中的属性名一致因为watch是依赖data中的属性当data中的属性发生改变的时候watch中的函数就会执行。 2、watch中的函数有两个参数前者是newVal后者是oldVal。 3、watch中的函数是不需要调用的。 4、watch只会监听数据的值是否发生改变而不会去监听数据的地址是否发生改变。也就是说watch想要监听引用类型数据的变化需要进行深度监听。obj.name(){}------如果obj的属性太多这种方法的效率很低obj:{handler(newVal){},deep:true}------用handlerdeep的方式进行深度监听。 5、特殊情况下watch无法监听到数组的变化特殊情况就是说更改数组中的数据时数组已经更改但是视图没有更新。更改数组必须要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100this.$set(this.arr,0,100)-----修改arr第0项值为100。 6、immediate:true 页面首次加载的时候做一次监听。 1. 不支持缓存数据变直接会触发相应的操作 2.watch支持异步 3.监听的函数接收两个参数第一个参数是最新的值第二个参数是输入之前的值 4. 当一个属性发生变化时需要执行对应的操作一对多 5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据当数据变化时触发其他操作函数有两个参数 immediate组件加载立即触发回调函数执行 deep: 深度监听为了发现对象内部值的变化复杂类型的数据时使用例如数组中的对象内容的改变注意监听数组的变动不需要这么做。注意deep无法监听到数组的变动和对象的新增参考vue数组变异,只有以响应式的方式触发才会被监听到。 使用场景当一条数据的更改影响到多条数据的时候---------搜索框 区别 1、功能上computed是计算属性watch是监听一个值的变化然后执行对应的回调。 2、是否调用缓存computed中的函数所依赖的属性没有发生变化那么调用当前的函数的时候会从缓存中读取而watch在每次监听的值发生变化的时候都会执行回调。 3、是否调用returncomputed中的函数必须要用return返回watch中的函数不是必须要用return。 4、使用场景computed----当一个属性受多个属性影响的时候使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候使用watch-------搜索框。
