VUE3.0,DAY12
姓名案例计算属性实现
1.计算属性,就是拿着已有的属性去计算创造一个全新的属性。注意一个computed
的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>姓名案例—计算属性实现</title>
<!--引入vue.js-->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<!--br是换行符-->
<div id="root">
<!--使用v-model进行双向数据绑定,使得输入框内数据改变时,data也会改变,data里的参数改变时,输入框也会改变。-->
姓:<input type="text" v-model:value="xing"><br>
名:<input type="text" v-model:value="ming"><br>
全名:<span>{{fullname}}</span><br>
全名:<span>{{fullname}}</span>
<!--调用函数的返回值做插值-->
<!--在插值括号里调用函数的时候要加括号(),这里是对象的形式,所以不加()-->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
//创建vue实例
//细节需要注意:当vue的data中的任意数据发生变化,则vue模板就会在重新解析一次。然后更新用到data中数据的地方
const vm = new Vue({
el: '#root',
data: {
//左侧叫属性名:右侧的value叫属性值
xing: '张',
ming: '三',
},
//computed是计算属性的意思,因为计算属性的过程可能复杂,所以fullname写成对象的形式加括号()
computed: {
fullname: {
//get是当有人在读取fullname时,get就会被调用,且返回值就作为fullname的值
//get什么时候调用呢?1.初次读取fullname时,第二次在读取时,是直接从缓存中读取。get就不被再次调用了。
//2.所依赖的数据发生变化时(xing或者ming变化时)。
get() {
console.log('get函数被调用了');
//console.log(this);//打印输出this,验证了此处的this就是vm,那么下边就可以用this拿vm的内容
return this.xing + '-' + this.ming
}
}
}
})
</script>
</html>
使用set(){}的方法修改计算属性
1.在网页中按F12,在console中修改计算属性,可以看到,修改后的fullname,同时在页面显示框中更新了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>姓名案例—计算属性实现</title>
<!--引入vue.js-->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<!--br是换行符-->
<div id="root">
<!--使用v-model进行双向数据绑定,使得输入框内数据改变时,data也会改变,data里的参数改变时,输入框也会改变。-->
姓:<input type="text" v-model:value="xing"><br>
名:<input type="text" v-model:value="ming"><br>
全名:<span>{{fullname}}</span><br>
全名:<span>{{fullname}}</span>
<!--调用函数的返回值做插值-->
<!--在插值括号里调用函数的时候要加括号(),这里是对象的形式,所以不加()-->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
//创建vue实例
//细节需要注意:当vue的data中的任意数据发生变化,则vue模板就会在重新解析一次。然后更新用到data中数据的地方
const vm = new Vue({
el: '#root',
data: {
//左侧叫属性名:右侧的value叫属性值
xing: '张',
ming: '三',
},
//computed是计算属性的意思,因为计算属性的过程可能复杂,所以fullname写成对象的形式加括号()
computed: {
fullname: {
//get是当有人在读取fullname时,get就会被调用,且返回值就作为fullname的值
//get什么时候调用呢?1.初次读取fullname时,第二次在读取时,是直接从缓存中读取。get就不被再次调用了。
//2.所依赖的数据发生变化时(xing或者ming变化时)。
get() {
console.log('get函数被调用了');
//console.log(this);//打印输出this,验证了此处的this就是vm,那么下边就可以用this拿vm的内容
return this.xing + '-' + this.ming
},
set(value) {
//修改计算属性
console.log('set', value);
const arr = value.split('-')
this.xing = arr[0]
this.ming = arr[1]
}
}
}
})
</script>
</html>
总结
计算属性:
1.定义: 要用的属性不存在,要通过已有属性计算得来
2.原理:底层借助了objcet.defineproperty方法提供的getter和setter。
3. get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比, 内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函 数去响应修改,且set中 要引起计算时依赖的数据发生变化