vue监听属性和计算属性
一、前言
vue是以数据驱动视图,所以很多的场景我们是基于数据的改变去做一些操作,这里就来探究一下vue是怎么样去追踪数据的变化的,追踪到数据变化,我们可以做些什么,不从源代码的角度去研究,这里我们粗浅的水一下
二、对象属性
在此之前,你需要对对象有一定的了解,首先看一个例子
var obj = {
name: 'zhangsan',
age: '22'
}
console.log(obj.name+'----'+obj.age); // zhangsan----22
// 修改改对象
obj.name = 'keli';
obj.age = "20";
// 查看修改是否生效
console.log(obj.name+'----'+obj.age); // keli----20
// -----
console.log(Math.PI); // 3.1415926...
Math.PI = 1234;
console.log(Math.PI); // 3.1415926...
自己声明了一个对象obj并且修改里面的属性值,发现是可以的,但是试图修改javascript的Math属性值发现是不可以的,这是为何?这里我们需要对对象的属性作进一步的学习。
javascript的属性分为数据属性和访问器属性,而不管是什么类型的属性都好,属性里面都有一个描述。
1、描述
在 Javascript 中, 属性由一个string类型的“名字”(name)和一个“属性描述符”(property descriptor)对象构成。
一个属性描述符是一个记录,由下面属性当中的某些组成的
属性描述符 | 作用 |
---|---|
value | 包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值时,把新值保存在这个位置。默认值是 undefined |
configurable | 表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性 |
enumerable | 表示能否通过 for-in 循环返回属性 |
writable | 表示能否修改属性的值 |
set | 获取该属性值的设置器函数(setter)。 如果没有设置器, 该值为undefined |
get | 获取该属性值的访问器函数(getter)。如果没有访问器, 该值为undefined |
下面我们来学习几个方法
Object.getOwnPropertyDescriptor(obj, prop)
方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)
obj:需要查找的目标对象
prop:目标对象内属性名称
返回值:如果指定的属性存在于对象上,则返回其属性描述符对象(property descriptor),否则返回 undefined
Object.defineProperty(obj, prop, descriptor)
该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
obj:要定义属性的对象。
prop:要定义或修改的属性的名称或Symbol
descriptor:要定义或修改的属性描述符。
2、数据属性
数据属性包含了4个描述其行为的属性描述符:
属性描述符 | 作用 |
---|---|
configurable | 表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性 |
enumerable | 表示该属性是否可以使用for...in或Object.keys()枚举 |
value | 包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值时,把新值保存在这个位置,默认值是 undefined |
writable | 属性的值是否可以被重写 |
下面我们来看一个简单的对象它的数据属性是长怎么样的
var obj = {
name: 'zhangsan',
age: '22'
}
console.log(Object.getOwnPropertyDescriptor(obj, "name"))
{value: "zhangsan", writable: true, enumerable: true, configurable: true}
configurable: true
enumerable: true
value: "zhangsan"
writable: true
__proto__: Object...
可以看到对应的四个属性描述符,它们的值都是true,下面我做以下的修改
var obj = {
name: 'zhangsan',
age: '22'
}
Object.defineProperty(obj,"name",{
configurable:true,
enumerable:true,
value:"100",
writable:false
});
console.log(obj); // {name: "100", age: "22"}
obj.name = "keli";
console.log(obj); // {name: "100", age: "22"}
可以看到,当设置了value为100,writable为false,obj的name属性值变成了100,并且无法被修改
3、访问器属性
访问器属性包含了4个描述其行为的属性描述符:
属性描述符 | 作用 |
---|---|
configurable | 表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性 |
enumerable | 表示该属性是否可以使用for...in或Object.keys()枚举 |
set | 设置该属性值的设置器函数(setter)。 如果没有设置器, 该值为undefined |
get | 获取该属性值的访问器函数(getter)。如果没有访问器, 该值为undefined |
注意:访问器属性没有value、writable描述符的
首先,看一下访问器属性是怎样的
var obj = {
name: 'zhangsan',
get age() {
return "22"
}
}
console.log(obj);
cosole.log(obj.name);
console.log(obj.age);
console.log(Object.getOwnPropertyDescriptor(obj, "age"));
打印结果如下:
从上面的结果可以看到执行console.log(obj)
,是不能直接看到age的值的,那么可以打印出age的值吗?
执行console.log(obj.age)
,发现是可以打印出age的值的
执行console.log(Object.getOwnPropertyDescriptor(obj, "age"))
,可以看到该属性对应的四个属性描述符,看到这里可以很明确的知道age就是一个访问器属性,好,下面来分析一下这几个描述符
首先,访问器属性里面是没有value和writable描述符的,取而代之的是get和set。
get和set描述符是以一个函数的形式出现的,当程序查询访问器的属性值时,JavaScript调用getter方法(无参数),这个方法的返回值就是该属性存取表达式的值。当程序设置一个访问器属性值时,JavaScript调用setter方法,将赋值表达式右侧的值当作参数传入setter
好了,也就是说,如果想要读取访问器属性的值,那么这个属性必须要有get描述符,如果想要设置该访问器属性的值就必须要set描述符
var obj = {
get age() {
return "22"
}
}
console.log(obj.age); // 22
obj.age = '20';
console.log(obj.age); // 22
上面的结果显示,访问器属性age没有set描述符,是无法设置该属性的值的
那么如果设置该属性的值的话,就要在对象中添加添加该属性的set描述符
var obj = {
get age() {
return "22"
},
set age(val) {
return val;
}
}
console.log(obj.age); // 22
obj.age = '20';
console.log(obj.age); // 22
很明显这样的写法是错误的,因为读取age的值是调用get方法,它永远返回的是22,不管你设置的是什么值,因此我们要用一个变量来存储访问器属性的值
var obj = {
get age() {
return this._a_;
},
set age(val) {
this._a_ = val;
}
}
console.log(obj.age); // undefined
obj.age = '20';
console.log(obj.age); // 20
正确的写法如上所示。get和set方法中的this都指obj对象。名称 _a_
只是一种惯例,并没有其它任何特殊行为,它只是一个普通的变量。把它换成其它任意合法名称如 _b_
都行,甚至可以在外面将它打印出来
var obj = {
get age() {
return this._a_;
},
set age(val) {
this._a_ = val;
}
}
console.log(obj.age); // undefined
obj.age = '20';
console.log(obj.age); // 20
console.log(obj._a_); // 20
另外,访问器属性也是可以继承的
var obj = {
get age() {
return this._a_;
},
set age(val) {
this._a_ = val;
}
}
obj.age = '20';
console.log(obj.age); // 20
var newObj = Object.create(obj);
console.log(newObj.age); // 20
好了,总结一下什么是访问器属性
像age这种使用set或get方法定义的属性称为访问器属性
好了,现在了解了数据属性和访问器属性,那么问题来了,数据属性在对象中经常可以见到,那访问器属性什么用呢?
访问器属性是 ECMA 标准定义的属性类型,是用来实现 Javascript 引擎本身使用的,也就是说我们在平时定义一个对象的时候,一般情况是很少使用的。
访问器属性应用的一个场景就是双向数据绑定,上面介绍了那么多,我主要是为了介绍vue的双向数据绑定而作的铺垫
简单来说,js属性的变化,vue可以通过访问器属性实时汇报这个变化,并且通知watcher更改相应的组件
三、vue如何追踪变化的
以下内容参考vue官方文档
vue是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data
选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty
把这些 property 全部转为 getter/setter。
这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同。
每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。
也就是说,如果一个对象里面的某个属性,vue不能把它转化成getter/setter,这就意味着vue无法追踪到该对象属性的变化,这将直接影响到组件的渲染,不是说好的数据驱动视图吗?怎么到这里就驱不动了呢?
因此,我们要了解什么情况下是vue是无法追踪数据的变化的,应该怎么解决
1、对于对象
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data
对象上存在才能让 Vue 将它转换为响应式的
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的
对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property
但是,可以使用 Vue.set(object, propertyName, value)
方法向嵌套对象添加响应式 property。例如,对于上例:
Vue.set(vm.data, 'b', 2)
您还可以使用 vm.$set
实例方法,这也是全局 Vue.set
方法的别名:
this.$set(this.data,'b',2)
有时你可能需要为已有对象赋值多个新 property,比如使用 Object.assign()
或 _.extend()
。但是,这样添加到对象上的新 property 不会触发更新。在这种情况下,你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
2、对于数组
Vue 不能检测以下数组的变动:
- 当你利用索引直接设置一个数组项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
举个例子:
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue
相同的效果,同时也将在响应式系统内触发状态更新:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
你也可以使用 vm.$set
实例方法,该方法是全局方法 Vue.set
的一个别名:
vm.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题,你可以使用 splice
:
vm.items.splice(newLength)
3、声明响应式的property
由于 Vue 不允许动态添加根级响应式 property,所以你必须在初始化实例前声明所有根级响应式 property,哪怕只是一个空值:
var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'
如果你未在 data
选项中声明 message
,Vue 将警告你渲染函数正在试图访问不存在的 property
四、计算属性和监听器
下面先看一个简单的场景
var person = {
firstName: "Yang",
lastName : "Zhang",
fullNmae: "Yang Zhang"
};
person.firstName = "Fang";
person.fullName = "Fang " + person.lastName;
person.fullName; //Fang Zhang
上面的例子,姓名是由姓和名字组成的,也就是说如果我改变了名字,就要手动的去改变姓名,否则,姓名永远是默认值
这样维护起来太麻烦了,行,我改代码
var person = {
firstName: "Yang",
lastName : "Zhang",
getFullName: function(){
return this.firstName+' '+this.lastName;
},
setFullName: function(name) {
var words = name.split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
};
person.firstName ="Fang";
person.fullName; //Fang Zhang
你这样写倒是也没有毛病,但是我可能觉得,本来就是一个属性,你给我整一个方法,太粗暴了
行的,下面将fullName
改写成访问器属性
var person = {
firstName: "Yang",
lastName : "Zhang",
get fullName(){
return this.firstName+' '+this.lastName;
},
set fullName(name) {
var words = name.split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
};
person.firstName ="Fang";
person.fullName; //Fang Zhang
看到这里,你可能觉得访问器属性太好用了,那是不是以后只要某个属性的值是依赖其他属性的值得到的,我都把它改写成访问器属性呢?当然可以,但是如果你使用的是vue,你大可以不必这样做,类似的vue提供了计算属性和监听器
1、计算属性
学习一样东西不仅是要学会怎么使用的,我觉得很重要还要了解它在什么场景下使用
在vue中,模板内的表达式的内容是很简单的,但是如果放入太多的逻辑会让模板过重且难以维护,如
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message
的翻转字符串。当你想要在模板中多包含此处的翻转字符串时,就会更加难以处理
因此,对于任何复杂逻辑,你都应当使用计算属性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
又如,将姓名改写成计算属性:
var vm = new Vue({
el: '#demo',
data: {
firstName: "Yang",
lastName : "Zhang",
fullName: 'Yang Zhang'
},
computer: {
fullName:function(){
return this.firstName+' '+this.lastName;
}
}
})
注意
-
在vue中计算属性的写法与实际get/set的写法是有区别的
-
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:
// ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ...
现在再运行
vm.fullName = 'John Doe'
时,setter 会被调用,vm.firstName
和vm.lastName
也会相应地被更新
2、计算属性与方法的区别
上面的介绍中我们知道:只要某个属性的值是依赖其他属性的值得到的,我都把它改写成访问器属性,也可以使用方法来实现,当你不使用vue的时候,你大可以使用你喜欢的方式,但是在vue中,计算属性和方法是有区别的,你很必要去了解他们的区别,首先,看看在vue中是怎么实现计算属性同样的效果
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
既然如此,为啥不能随心所欲呢?
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message
还没有发生改变,多次访问 reversedMessage
计算属性会立即返回之前的计算结果,而不必再次执行函数。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。
3、监听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:监听属性。
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: "Yang",
lastName : "Zhang",
fullName: 'Yang Zhang'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
你会发现,上面代码是命令式且重复的,对比一下,计算属性的写法
var vm = new Vue({
el: '#demo',
data: {
firstName: "Yang",
lastName : "Zhang",
fullName: 'Yang Zhang'
},
computer: {
fullName:function(){
return this.firstName+' '+this.lastName;
}
}
})
所以我们发现,在这种情况下,计算属性比监听属性更加合适
那么问题来了,什么情况下适合使用监听属性,学习一下文档上的案例(具体的看文档)
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
created: function () {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
// 请参考:https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
}
}
})
</script>
在这个示例中,使用 watch
选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
4、计算属性和监听属性的区别
计算属性:
computed
的依赖值 , 也就是监测的值有多个 , 当其中的依赖值发生变化时 , 就会自动执行相应的函数- 计算属性的结果会被缓存,只要相关依赖未改变,只会返回之前的结果 , 除非依赖的响应式属性变化才会重新计算并且返回新的结果
监听属性:
- 当监听属性的值发生变化时,调用对应的方法
- 需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
共同点:
watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。
不同点:
1.watch监控属性依赖的值是单个,computed计算属性依赖的值是多个
2.watch没有缓存,computed提供缓存