vue中计算属性computed理解说明包括vue侦听器,缓存与computed的区别

一、计算属性(computed)

1、vue computed 说明

当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护

computed主要的作用:

分离逻辑(模板和数据分离)

缓存值

双向绑定(getter,setter)

2、语法格式

格式


 	computed:{ [key: string]: Function | { get: Function, set: Function } }

参数说明:

key:字符串类型

值:可以是一个方法,如果是方法默认是get操作,也可以是对象 ,设置get属性或者set属性

3、基础用法

说明

在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,最终返回一个结果,

计算属性还可以依赖多个Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新,适用于比较费时的数据计算

示例代码


 	<div id="app">
 	     <!--使用表达式的方式-->
 	     <p v-text="originalPrice - discountPrice">
 	     <!--使用计算属性的方式-->
 	     <p v-text="currentPrice">
 	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 	<script>
 	     let app = new Vue({
 	         el: '#app',
 	         data: {
 	                 id:1,
 	             originalPrice:1200,
 	             discountPrice:200,
 	         },
 	         //计算属性
 	         computed: {
 	             // 把日期换成 常见规格格式的字符串。
 	             currentPrice: function () {
 	                 return "当前价格:" + (this.originalPrice - this.discountPrice);
 	             }
 	         }
 	     });

4、setter与getter

说明

每一个计算属性都包含一个getter 和一个setter,上面的示例都是计算属性的默认用法, 只是利用了getter来读取

如果需要,也可以提供一个setter 函数, 当修改计算属性的值就像修改一个普通数据那样时,就会触发setter 函数

示例代码


 	<div id="app1">
 	     <p v-text="currentPrice">
 	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 	<script>
 	     let app = new Vue({
 	         el: '#app',
 	         data: {
 	             id: 1,
 	             originalPrice: 1200,
 	             discountPrice: 200,
 	         },
 	         //计算属性
 	         computed: {
 	                 cache:false,
 	             // 把日期换成 常见规格格式的字符串。
 	             currentPrice: {
 	                 get: function () {
 	                     return "当前价格:" + (this.originalPrice - this.discountPrice);
 	                 },
 	                 // 注意必须要传递参数,否则没有意义
 	                 set: function (value) {
 	                     //执行自定义的一下操作
 	                     this.discountPrice = value
 	                 }
 	             }
 	         }
 	     });
 	</script>
 	<!--
 	在 console 中 输入 app.currentPrice=300
 	1> 先执行get方法改变discountPrice的值
 	2> 因为数据发生改变了 所以会重新计算当前的价格, 执行get方法
 	-->

注意

绝大多数情况下,我们只会用默认的getter方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法

5、缓存

说明

计算属性基于它们的依赖进行缓存的,只有相关依赖发生改变的时候才会重新求值,一般为响应式依赖

什么是响应式依赖,Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应

示例代码


 	<!-- 响应式依赖 -->
 	<script>
 	     var vm = new Vue({
 	         data: {
 	         // 声明 message 为一个空值字符串
 	         message: ''
 	         },
 	     })
 	     // 响应式
 	     vm.message = 'Hello!'
 	 
 	     vm.v="非响应式的的值"
 	</script>

 


 	<div id="app">;
 	     <button @click="getMethodsDate">methods</button>
 	     <button @click="getComputedDate">computed带缓存</button>
 	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 	<script type="text/javascript">
 	     new Vue({
 	         el: '#app',
 	         methods: {
 	getMethodsDate: function () {
 	                 console.log(new Date().toLocaleTimeString())
 	             },
 	             // 返回computed选项中设置的计算属性——computedDate
 	             getComputedDate: function () {
 	                 console.log("缓存--->" + this.computedDate)
 	             }
 	         },
 	         computed: {
 	             computedDate: function () {
 	                 return new Date().toLocaleTimeString()
 	             }
 	         }
 	     })
 	</script>
 	 

6、与methods的区别

computed 只有符合:存在依赖型数据,依赖型数据发生改变这两个条件,computed才会重新计算。而methods下的数据,是每次都会进行计算的

调用方式不一样,computed定义的成员像属性一样访问,而methods定义的成员必须以函数形式调用。

computed是带缓存的,只有其引用的响应式属性发生改变时才会重新计算,而methods里的函数在每次调用时都要执行。

五、侦听器(watch)

1、说明

官方:当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态

watch和我们前面介绍的methods相同的语法,但是有一个关键的区别。虽然嵌套属性的值确实是函数,但键的名称必须对应数据属性中的名称

2、语法格式


 	watch:{
 	[key: string]: string | Function | Object }]

3、语法说明

key:必须是Vue对象data中定义的属性

值:值可以是一个字符串,这个字符串是方法名;值可以是一个函数;值也可以是一个对象,其中包含回调函数可以其他选项:比如是否深度遍历。

4、基础使用

示例代码


 	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 	 
 	<script>
 	     let vm = new Vue({
 	         data: {
 	             test: "111",
 	             user: {
 	                 name: "码帝",
 	                 address: {
 	                     city: "大武汉"
 	                 }
 	             }
 	         },
 	         methods: {
 	             fun: function (val) {
 	                 alert(val)
 	             }
 	         },
 	         watch: {
 	             // 方法名方式 对应 methods中的函数名
 	             // test: 'fun',
 	             // 函数方式
 	             test: function (v1, v2) {
 	                 alert("新值" + v1 + "====旧值:" + v2)
 	             },
 	             /**
 	                 *什么是深度 例如 data: {test: "111", user: {name: "码帝" ,address{city:'大武汉'}}
 	                 * user属性对应值就是深层,一次内推
 	                 * 如果我们监听的user属性 当user.name属性发生改变的时候 watch监听是不到,所有我们这里需要使用深层监听
 	                 */
 	             //
 	             user: {
 	                 handler: function (val) {
 	                     alert(val.name)
 	                 },
 	                 // 是否深度监听 默认是false
 	                 // 如果不设置为true当我们手动设置vm.user.name = "撸帝"的时候,是监听不到的
 	                 deep: true
 	             },
 	             /**
 	                 * 或者也可以使用下面的方式来监听
 	         * 注意键值必须是一个字符串,所以用引号括起来
 	                 *
 	                 */
 	 
 	             "user.address.city": function (val) {
 	                 alert(val)
 	             }
 	         }
 	     });
 	     vm.test = '333';
 	     vm.user.name = "撸帝";
 	     vm.user.address.city = '长沙'

 


 	<div id="app">
 	     <input type="text" v-model="search"/>
 	     
 	         <li v-for="result in results" v-text="result">
 	     
 	</div>
 	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 	 
 	<script>
 	     let vm = new Vue({
 	         el: "#app",
 	         data: {
 	             user:{
 	                 name:"码帝",
 	             }
 	             search: "",
 	             results: [],
 	
 	         },
 	         methods: {
 	             fun: function () {
 	             alert("111");
 	             }
 	         }
 	         watch: {
 	             // 使用函数
 	             search: function (v1, v2) {
 	                 console.log('新值: %s, 旧值: %s', v1, v2)
 	                 this.results.push(v1)
 	             }
 	         }
 	
 	     })
 	</script>

5、与computed的区别

触发条件不同

computed计算属性会依赖于使用它的data属性,只要是依赖的data属性值有变动,则自定义重新调用计算属性执行一次。

watch则是在监控的data属性值发生变动时,其会自动调用watch回调函数。

应用场景不同

执行异步操作,开销较大的操作,避免堵塞主线程,使用watch。

简单且串行返回的,使用computed

更多关于VUE计算属性computed的相关文章请查看下面的相关链接

标签

发表评论