提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
总结
定义:要用的属性不存在 要通过已有的属性计算得来
原理:底层借助了Object.defineproperty方法提供的getter和setter
get函数什么时候执行
初次读取时会被执行一次 当依赖的数据发生变化时会被再次调用
优势 与methods实现相比 内部有缓存机制(复用) 效率更高 调试方便
备注
计算属性最终会出现在vm上 直接读取使用即可
如果计算属性要被修改 那必须写set函数去响应修改 且set中要引起计算时依赖的数据发生改变时
data和methods中的属性和方法
初始的时候就在vm上 而计算属性computed中定义的方法调用的时候只需写方法名就可以 vm
会自动去找getter和setter方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算属性</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
姓: <input type="text" v-model="firstName"><br>
名: <input type="text" v-model="lastName"><br>
姓名:<span>{{fullName}}</span><br>
姓名:<span>{{fullName}}</span><br>
姓名:<span>{{fullName}}</span><br>
姓名:<span>{{fullName}}</span><br>
姓名:<span>{{fullName}}</span><br>
姓名:<span>{{fullName}}</span><br>
姓名:<span>{{fullName}}</span><br>
姓名:<span>{{fullName}}</span>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
firstName:'张',
lastName:'飞'
},
computed:{
fullName:{
//get有什么作用? 当有人读取fullName时 get就会被调用 且返回值就作为fullName的值
// 什么时候调用?1 初次读取fullName时 2 所依赖的数据发生变化时
get(){
console.log('@---fullName');
// console.log(this);//此处的this是vm
return this.firstName + '-' + this.lastName;
},
// set什么时候调用?当定义的fullName被修改的时候
set(value){
console.log('set',value);
const arr = value.split("-")
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
});
</script>
</body>
</html>
<!-- 总结
定义:要用的属性不存在 要通过已有的属性计算得来
原理:底层借助了Object.defineproperty方法提供的getter和setter
get函数什么时候执行
初次读取时会被执行一次 当依赖的数据发生变化时会被再次调用
优势 与methods实现相比 内部有缓存机制(复用) 效率更高 调试方便
备注
计算属性最终会出现在vm上 直接读取使用即可
如果计算属性要被修改 那必须写set函数去响应修改 且set中要引起计算时依赖的数据发生改变时
data和methods中的属性和方法
初始的时候就在vm上 而计算属性computed中定义的方法调用的时候只需写方法名就可以 vm
会自动去找getter和setter方法
-->
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/163337.html