【学Vue就像玩一样】什么是计算属性？什么使监视属性？

创始人

2024-05-05 12:27:20

0次

1.计算属性

2.监视属性

2.1监视属性

2.2深度监视

3.computed和watch的区别

本栏会细致的将Vue划分为两大模块，基础篇，进阶篇。想要顺利通关vue篇首先要拥有三剑客，当然node ajax法宝也会辅佐你通关的，在学习的途中如果遇到了问题，可以试着回顾一下之前的情节，以便于更好的推进主线剧情，准备出发!

1.计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。在Vue中有多种方法为视图设置值：使用指令直接将数据值绑定到视图; 使用简单的表达式对内容进行简单的转换; 使用过滤器对内容进行简单的转换（晦涩难懂的很）

举个例子

我们要实现这样一个需求：说有个人啊叫山鱼，我们要把他的名和姓分开，来渲染到页面种，这该怎么做呢？

方法1：直接使用插值语法

直接再data里面写个姓写个名在使用插值语法插进去就可以了，虽然看起来非常简单，但是一旦传入的数据多了起来，就会使代码看起来很臃肿，后期进行维护也比较艰难

姓：
名：
姓名：{{firstName}}-{{lastName}}

方法二：使用计算属性

我们在这里定义了一个计算属性fallName。

更改此应用的data中firstName和lastName值后，可以看到 fallName也会随之改变。

在模板中使用计算属性的方式和一般的属性并无二致。Vue 会检测到this.fallName依赖于this

.firstName和lastName所以当所以data数据改变时，任何依赖于this.fallName的绑定都将同时更新。这种计算属性可以很好的将代码臃肿的问题解决掉也利于维护。

姓：
名：
姓名：{{fullName}}

简写方式

姓：
名：
姓名：{{fullName}}

2.监视属性

2.1监视属性

1.当被监视的属性变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在，才能进行监视

3.监视的两种写法:

(1) . new Vue时传入watch配置

(2) .通过vm. $watch监视

举个小例子


今天我很{{info}}

2.2深度监视

(1)Vue中的watch默认不监测对象内部值的改变(层)

(2)配置deep:true可以监测对象内部值改变(多层)。

(3)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

(4)使用watch时根据数据的具体结构，决定是否采用深度监视

 watch: {// 完整写法// mood: {// deep:true//     handler(newValue, oldValue) {//         console.log("mood被修改", newValue, oldValue);//     }// }// 简写（但是不能配置immediate:true,deep:true）mood(newValue, oldValue) {console.log('mood被修改', newValue, oldValue);}}})// 正常写法vm.$watch('mood',{immediate:true,deep:true,handler(newValue, oldValue) {console.log('mood被修改', newValue, oldValue);}})// 简写(但是不能配置immediate:true,deep:true)vm.$watch('mood',function(newValue, oldValue){console.log('mood被修改', newValue, oldValue);})