计算属性 (computed) 和监听属性 (watch)

最新推荐文章于 2024-08-06 09:50:35 发布

星梦之羽

最新推荐文章于 2024-08-06 09:50:35 发布

阅读量1.6k

点赞数 2

分类专栏： Vue 文章标签： javascript vue.js html es6

本文链接：https://blog.csdn.net/weixin_45571672/article/details/117174473

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中的计算属性与监听属性。计算属性用于根据其他数据计算并返回新的值，它们有缓存机制，仅在依赖变化时更新。计算属性可以设置get和set方法，get用于获取值，set用于在值改变时执行。监听属性则是在特定值变化时触发的回调，可以配置initial immediate和deep选项。监听事件在数据变更时执行指定的处理函数。

摘要由CSDN通过智能技术生成

计算属性 (computed)

什么是计算属性

计算属性：见名思意就是用来做计算的最后通过 return 返回一个值

在 computed 属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
触发条件
调用后初始触发一次只有在computed 属性对象中定义计算属性的方法内的属性被修改时才会触发计算属性如果两
次结果相同它会利用缓存机制直接使用上次的结果同时调用多次在内容没有变化的情况下只会执行一次，计算属性有内部缓存

计算属性的写法

 new Vue({
      el:"#app",
       computed:{
           a(){
              return 123
           }
       }
   })

	<div>
		{{a}}		<!-- 输出 123 -->
	</div>

计算属性中含两个回调函数(get set)

 new Vue({
        el:"#app",
        data:{
        	num:123
        },
        computed:{
            a:{
                //	 计算属性会在所调用的属性修改后触发get方法
                get(){
					console.log(this.num)	//	123
                },
                //	ste方法当当前属性值发生改变时触发回调更新相关数据
                //	a 更改后的值
                //	b 原来的值
                set(a,b){
					console.log(a)	//	456
					console.log(b)	//	123
                }
            }
        },
        methods:{
        	fun(){
        		//	触发时 触发set方法
        		this.num = 456
        	}
        }
    })

	<div>
		{{num}}		<!-- 触发get方法 -->
	</div>

监听属性 (watch)

什么是计算属性

当你监视的那个值发生变化的时候触发的事件叫监听事件
！！！监听属性中的方法名必须要与被监听的属性同名

监听事件怎么写

<div id="app">
    {{a}}
</div>
<script>
    const VM = new Vue({
        el: "#app",
        data: {
            a: 123
        },
        watch: {
            a(a,b) {
            	//	a 更改后的值
                //	b 原来的值
                console.log(a, b)
            }
        },
        methods{
        	fun(){
        		//	调用这个函数时会出啊发监听属性
        		this.a = 1	
        	}
        }
    })
</script>

监听属性有三个属性(handler,immediate,deep)

handler：默认执行函数
immediate：初始执行
deep：深度监听（想对象数组类的数据只修改里面的内容不重新赋值的情况下不开深度监听就无法触发监听事件）

<div id="app">
    {{a}}
</div>
<script>
    const VM = new Vue({
        el: "#app",
        data: {
            a: 123,
            b: {
                name: "123",
                c: {
                    cc: 1
                }
            }
        },
        watch: {
            a: {
                //  handler是监听属性默认调用的方法
                deep: true,		// 	深度监听
				//  a是新值b是旧值
                handler(a, b) {
                    console.log(a, b)
                    // console.log("我是a")
                },
                //  immediate开始时是否调用默认为false  为true时会在一开始直接调用一次
                immediate: true		//	开始自动执行一次
            }
        }
    })
</script>