Vue|Vue（计算属性与监视属性） vue.js|前端框架|web|vue

文章目录

Vue：计算属性与监视属性
一、计算属性
- 1、插值语法实现
- 2、通过方法实现
- 3、通过计算属性
- - 3.1、计算属性的优势
二、监视属性
三、深度监视

Vue：计算属性与监视属性一、计算属性

在开发中，可以有这样的需求，在属性（date）中，有fistName和lastName两个属性，需要将两个属性拼接起来，这种需求也很简单，有以下实现方式

1、插值语法实现

直接在body中将两个数据拼接

姓：名：姓名：>{{fistName + lastName}}

2、通过方法实现

编写一个方法，返回值为两者拼在一起的字符串

姓：名：姓名：>{{fullName()}}

new Vue({ el:'#root', data:{ fistName:'张', lastName:'三' }, methods: { fullName(){ return this.fistName + this.lastName; } }, })

3、通过计算属性

计算属性就是vue中的computed，这里面存放的是计算属性
而data中的是属性，两者不一样

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

const vm = new Vue({ el:'#root', //属性 data:{ fistName:'张', lastName:'三' }, // 计算属性 computed:{ fullName:{ //当有人读取fullName时，get就会被调用，返回值为fullName的值 //get调用时机 //1、初次读取fullName //2、所依赖的数据变化时 get(){ //这里的this是指vm return this.fistName + this.lastName; }, //当fullName被调用时候调用 set(value){ const arr = value.split('-') this.fistName = arr[0] this.lastName = arr[1] } } } })

计算属性和方法的编写方式有点区别

{{}}中方法是写一个方法的，即带括号

但是计算属性只需要写名字即可，不用带花括号

计算属性中要编写两个方法，一个是get方法，另一个是set方法

当有人读取fullname这个计算属性，get方法就会被调用，返回值是fullname的值
当有人修改fullname这个计算属性，set方法就会被调用

当明确只有get方法，不需要set方法的时候，计算属性可以简写成如下：

fullName(){ return this.fistName + this.lastName; }

get函数什么时候执行：

初次读取时会执行一次

当依赖的数据发生变化时会被调用一次

3.1、计算属性的优势

相对于方法来说，计算属性内部有缓存机制（复用），效率更好，调试更方便
简单来说，倘若计算属性不变，计算属性的数据就会存进缓存中，当页面上的其他数据需要读取这个计算属性的话，不再需要从vm获取，直接从缓存里面获取

二、监视属性

监视属性可以监视某个属性的变化，并且可以获取变化前和变化后的数值
通过关键词watch实现

Document - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> 今天天气很{{info}} > Vue.config.productionTip = false; const vm = new Vue({ el: "#root", data: { isHot: true, }, computed: { info() { return this.isHot ? "炎热" : "凉爽"; }, }, methods: { changgeWeather() { this.isHot = !this.isHot; }, }, // 监视 //适用于一开始很明确地知道要监视谁 watch: { isHot: { //初始化时让handler调用一下 immediate: true, //什么时候调用？当isHost发生改变时 handler(newValue, oldValue) { console.log("isHost被调用", newValue, oldValue); } }, // } });

例如如上案例，当isHost被修改的时候，监视属性中的isHost中的handler就会被调用
而 immediate: true 的作用是再初始化的时候调用一下这个监视属性
注意的是监视属性必须存在，才可以进行监视

除了以上邪恶写法，还可以通过vm.$watch监视

vm.$watch("isHost", { //初始化时让handler调用一下 immediate: true, //什么时候调用？当isHost发生改变时 handler(newValue, oldValue) { console.log("isHost被调用", newValue, oldValue); }, });

两种的使用场合不同：