Vue学习笔记（二）——computed、watch

最新推荐文章于 2023-10-26 20:25:05 发布

rainbowday_

最新推荐文章于 2023-10-26 20:25:05 发布

阅读量320

点赞数 1

分类专栏： Vue.js 文章标签：前端 vue.js vue

本文链接：https://blog.csdn.net/rainbowday_/article/details/123722510

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

4.computed

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式，好处：使得数据处理结构清晰；

1、依赖于数据，数据更新，处理结果自动更新;

2、计算属性内部 this 指向 vm 实例;

3、在template调用时，直接写计算属性名即可；

4、常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据;

5、相较于 methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

4.1 插值语法实现

绑定事件时，function和function()都行

调用函数，如调用methos函数，如return值时，需要使用function()

<body>
    <!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br/><br/>
	    名：<input type="text" v-model="lastName"> <br/><br/>
		全名：<span>{{firstName}}-{{lastName}}</span>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三'
		}
	})
</script>

4.2 methods实现

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br/><br/>
		名：<input type="text" v-model="lastName"> <br/><br/>
		全名：<span>{{fullName()}}</span>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三'
		},
		methods: {
			fullName(){
				console.log('@---fullName')
				return this.firstName + '-' + this.lastName
			}
		},
	})
</script>

4.3 computed实现

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

computed:{
    fullName:{
        //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
        //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
        get(){
            console.log('get被调用了')
            // 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]
        }
    }
}

//当需要展示数据结果，不需要修改时，可以省去set()，直接把function作为get()，以下是简写方法
computed:{
	fullName(){
		console.log('get被调用了')
		return this.firstName + '-' + this.lastName
	}
}

5.watch

5.1 监视属性

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视

3.监视的两种写法：

(1).new Vue时传入watch配置

watch:{
	isHot:{
		immediate:true, //初始化时让handler调用一下
		//handler什么时候调用？当isHot发生改变时。
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	}
}

(2).通过vm.$watch监视

vm.$watch('isHot',{
	immediate:true, //初始化时让handler调用一下
	//handler什么时候调用？当isHot发生改变时。
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})

5.2 深度监视

深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

watch:{
    //正常写法
    isHot:{
         immediate:true, //初始化时让handler调用一下
         deep:true,//深度监视
        //当isHot值发生变化时，handler被调用
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    }, 
}

//或者：
vm.$watch('isHot',{
    immediate:true, //初始化时让handler调用一下
    deep:true,//深度监视
    handler(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue)
    }
})

5.3 简写监视属性

当监视的配置项只要handler时，可以使用简写

watch:{
    isHot(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue,this)
    }	 
}

//或者：
vm.$watch('isHot',(newValue,oldValue)=>{
    console.log('isHot被修改了',newValue,oldValue,this)
})

5.4 比较wach和computed

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：让this指向是vm

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数，数组过滤）最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

computed：

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br/><br/>
		名：<input type="text" v-model="lastName"> <br/><br/>
		全名：<span>{{fullName}}</span> <br/><br/>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三',
		},
		computed:{
			//简写
			fullName(){
				console.log('get被调用了')
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>

watched:

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br/><br/>
		名：<input type="text" v-model="lastName"> <br/><br/>
		全名：<span>{{fullName}}</span> <br/><br/>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三',
			fullName:'张-三'
		},
		watch:{
			firstName(val){
				setTimeout(()=>{
					console.log(this)
					this.fullName = val + '-' + this.lastName
				},1000);
			},
			lastName(val){
				this.fullName = this.firstName + '-' + val
			}
		}
	})
</script>

当初从实现代码来看，确实computed的实现更简单，但是当需要调用异步时，使用watch

因为watch是要自己写代码去修改

而computed完全是靠返回值，不能开启异步任务去维护数据

注意：watch中调用定时器时必须使用箭头函数，不然会指向window，而不是vm

5.5 watch、methods 和 computed 的区别？

1）基本说明

1.computed：计算属性将被混入到 Vue 实例中。所有getter 和 setter的this 上下文自动地绑定为 Vue 实例。计算属性是用来声明式地描述一个值依赖了其他的值。当在模板中把数据绑定到一个计算属性上时， Vue会在其依赖的任何值导致该计算属性改变时更新DOM。这个功能是非常强大的，它可以让代码更加声明式、数据驱动且易于维护。

2.methods： methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。methods函数绑定事件调用，不会使用缓存。

3.watch：观察和响应 Vue 实例上的数据变动，一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象，Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性。watch监听的是定义的变量。当定义变量的值发生变化时，调用对应的方法。在<div>中编写一个表达式name，在data中写入num 和lastname， firstname.在watch中，当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值，而在computed中，计算的是name依赖的值它不能计算在data中已经定义过的变量。

2）三者的加载顺序

1.computed 是在 HTML DOM 加载后马上执行的，如赋值：（属性将被混入到 ue 实例）

2.methods 则必须要有一定的触发条件才能执行，如点击事件

3.watch 呢？它用于观察 Vue 实例上的数据变动

3）默认加载的时候

先 computed 再 watch，不执行 methods；

4）触发某一事件后先

computed 再 methods 再到 watch computed 属性 vs method 方法 computed 计算属性是基于它们的依赖进行缓存的。

5）总结

计算属性computed只有在它的相关依赖发生改变时才会重新求值，当有一个性能开销比较大的的计算属性 A，它需要遍历一个极大的数组和做大量的计算，然后我们可能有其他的计算属性依赖于 A，这时候，我们就需要缓存，每次确实需要重新加载，不需要缓存时用 methods.

rainbowday_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue学习笔记（二）——computed、watch

4.computed在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式，好处：使得数据处理结构清晰；1、依赖于数据，数据更新，处理结果自动更新;2、计算属性内部 this 指向 vm 实例;3、在template调用时，直接写计算属性名即可；4、常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据;5、相较于 methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候
复制链接

扫一扫