先不通过计算属性去写 姓名案例
用插值语法({{}})
和methods
写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性与监听</title>
</head>
<body>
<div id="root">
<div>
<h2>用插值语法写</h2>
姓<input type="text" v-model="fristName"><br /><br />
名<input type="text" v-model="lastName"><br /><br />
全名<span>{{fristName}}-{{lastName}}</span>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="indexJS.js"></script>
</html>
Vue.config.productionTip = false
new Vue({
el: '#root',
data(){
return{
fristName: '张',
lastName: '三'
}
}
})
缺点是,之后越来越多的东西在{{}}里违背了Vue的风格
用methods去写
<div>
<h2>用methods去写</h2>
姓<input type="text" v-model="fristName"><br /><br />
名<input type="text" v-model="lastName"><br /><br />
全名<span>{{fullName()}}</span>
</div>
methods: {
fullName(){
return this.fristName + '-' + this.lastName;
}
},
这里的this
就是vm
实例
把data
里的fristName
改了就会导致对模板的重新解析,不知道你插值语法中的fullName()
函数一不一样,所以又去调了一遍。
只要data
中数据一变vue
会直接重新执行模板的,重新解析模板的时候,只要遇到了插值语法写方法,这方法绝对给你重新调
计算属性实现
到底什么是计算属性?
对于Vue来说data
里面写的配置项
就是属性
;fristName
叫属性名
,'张'
叫属性值
所谓的计算属性就是拿着你写完的属性去加工计算,并且生成一个全新的属性;就是计算属性;所以需要一个全新的配置项computed
配置方法和data
类似,但不能
computed: {
fullName: '张-三'
},
计算的过程比较复杂,所以要求你是一个对象
computed: {
fullName: {
//当有人读取fullName的时候,get就会被调用,且返回值就作为fullName的值
get(){
return fristName + '-' + lastName
}
}
},
尴尬的是你不会读这个fullName
。
其实fullName
也跟data
一样在vm
身上。vm._data
是把data
属性读到了但是没有计算属性里的全名
因为这是以后计算出来的,计算完直接丢在vm身上
其实当你去读取fullName
的时候vue
就帮你把fullName
的this
维护好了,当你去读取fullName
的时候vue
帮你去读取这个get()
并且vue
帮你把get
中的this
指向给你调成了vm
vue
在计算属性里面做了缓存
在读取到全名<span>{{fullName}}</span>
fullName被调用了
全名<span>{{fullName}}</span> --> 调用get() --> 拿到返回值 --> {{fullName}}去使用 -->(随后)做了一个缓存
有缓存说明,你修改了fullName值也是都缓存中的,所以 get()的调用有俩个时机的
/*
get什么时候被调用
1.初次读取fullName的时
2.所依赖的数据发生变化时
*/
data
和methods
你写啥出现在vm
上的就是啥,computed
里面的是个对象,那vm
身上的就是vm.get
不能这么理解;computed
往vm
身上放的时候,就自动调用get()方法
拿到get
的返回值,然后放在了vm
身上了,然后放的名字是fullName
既然能有get()
也就会有set()
那set()
有什么作用?fullName
终归是计算出来的新属性,只有get()说明fullName只有读取,但没有修改
computed: {
fullName: {
//当有人读取fullName的时候,get就会被调用,且返回值就作为fullName的值
get(){
return this.fristName + '-' + this.lastName
},
set(value){
}
}
},
这个set()不是必须写的
那么set()什么时候会被调用
当fullName
被修改的时候
其实好像fullName没有真正的值,你要用的时候它现给你算出来的
结论
计算属性
1.定义:要用的属性不存在,要通过已有属性
2.原理:底层借助了Object.defineproperty方法提供的getter和setter。
3.get函数什么时候执行?
(1).初次读取时会执行一次
(2).当依赖的数据发生改变时会被再次调用
4.优势: 与methods实现相比,内部缓存机制(复用),效率更高,调试方便
5.备注:
1.计算属性最终出现在vm上,直接读取使用即可
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
计算属性简写
一般计算属性一计算出来是不被修改的,不是不能改,从案例的角度来看完全没有必要写set, 注意,一旦你确定不用set
只用get
你才可以用简写形式
//完整写法
/*fullName: {
//当有人读取fullName的时候,get就会被调用,且返回值就作为fullName的值
get(){
return this.fristName + '-' + this.lastName
},
set(value){
console.log('set被调用了',value)
const arr = value.split('-')
this.fristName = arr[0];
this.lastName = arr[1];
}
}*/
//简写
fullName: function(){}
这个function()
就当你的getter
用;fullName
代表你计算属性的名字