VUE L 计算&监视属性 ⑥

SYFStrive

已于 2023-06-24 11:26:29 修改

阅读量272

点赞数

分类专栏： VUEJS 文章标签： vue.js javascript 前端前端框架

于 2023-06-20 22:17:07 首次发布

本文链接：https://blog.csdn.net/m0_61490399/article/details/129952117

版权

VUEJS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持✨

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽

提示：以下是本篇文章正文内容

$V u e j s$

简介： Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方

中文： https://cn.vuejs.org/
英文： https://vuejs.org/
Vue2API : https://v2.cn.vuejs.org/
Vue2 相关包： https://github.com/vuejs/awesome-vue
Vue2 入门安装官方：https://v2.cn.vuejs.org/v2/guide/installation.html
Vue 相关插件： https://awesomejs.dev/for/vue/

计算属性

$C o m p u t e d$

要显示的数据不存在，要通过计算得来。
在Computed对象中定义计算属性。
在页面中使用{{方法名}}来显示计算的结果。

$m e t h o d s$ $V S$ $co m p u t e d$

—代码演示 🎊 methods实现—

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>姓名案例_methods实现</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

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

	<script type="text/javascript">
		new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三'
			},
			methods: {
				getFullName() {
					console.log('getFullName被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})
	</script>
</body>

</html>

—代码演示 🎊 computed 实现—

	<!-- 
			1.计算属性：要显示的数据不存在，要通过计算得来。
			2.fullName函数底层用到的是对象setter和getter方法
			3.执行的时机：
					(1).初始显示会执行一次，得到初始值去显示。
					(2).当依赖的数据发生改变时会被再次调用。
			4.优势：与methods实现相比，内部有缓存机制，效率更高。
			5.备注：计算属性是用于直接读取使用的，不要加()
	-->

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>姓名案例_computed实现</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<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 />
		全名: <input type="text" v-model="ullName">
	</div>

	<script type="text/javascript">
		const vm = new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三',
			},
			computed: {
				/* 
					1.fullName是谁在调用？---Vue
					2.fullName什么时候调用？初次渲染会调用、当依赖的属性值发生变化
				*/

				//简写---相当与只指定了get，没有指定set
				fullName() {
					console.log('fullName')
					return this.firstName + '-' + this.lastName
				},

				// 完整写法----set和get都指定了
				ullName: {
					set(value) { //fullName被修改时set被调用，set中的this是vm，set会收到修改的值
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					},
					get() { //fullName被读取时get被调用，get中的this是vm
						console.log('get')
						return this.firstName + '-' + this.lastName
					}
				}
			}
		})
	</script>
</body>

</html>

监视属性

$Wa t c h$

通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算

—代码演示 🎊

	<!-- 
监视属性watch：
				1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
				2.属性必须存在，才能进行监视！！
				3.监视的两种写法：
						(1).new Vue时传入watch配置
						(2).通过vm.$watch监视
			computed和watch之间的区别：
					1.只要是computed能完成的功能，watch都可以完成
					2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
			备注：
					1.所有被Vue所调用（管理）的函数，都不要写箭头函数 ----- 例如：watch中的函数、computed中的函数
					2.所有不是被Vue所调（管理）的函数，都要写成箭头函数 --- 例如：定时器的回调、ajax的回调等等
					3.watch就是Vue给我提供的一个监测数据改变的手段，至于数据发生改变后，要做什么，得看具体的业务了逻辑。
					4.注意 监视旧值后新值作废
	-->

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>姓名案例_watch实现</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<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>

	<script type="text/javascript">
		const vm = new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三',
				fullName: ''
			},
			watch: {
				/* 
					1.watch中的firstName什么时候调用？data中的firstName被改变的时调用
					2.watch中的firstName的this是谁？---vm
				*/

				//监测姓-----精简写法
				/* firstName(newValue,oldValue){
					this.fullName = newValue + '-' + this.lastName
				}, */

				//监测姓-----完整写法
				/* firstName:{
					immediate:true, //若immediate为true则handler在初始化时，就会调用一次，以后就看firstName的改变了
					handler(newValue,oldValue){
						this.fullName = newValue + '-' + this.lastName
					}
				}, */

				//监测名-----精简写法
				lastName(newValue, oldValue) {
					this.fullName = this.firstName + '-' + newValue
				}
			}
		})

		//监测姓-----完整写法
		vm.$watch('firstName', {
			immediate: true, //若immediate为true则handler在初始化时，就会调用一次，以后就看firstName的改变了
			deep:true, //开启深度监视
			handler(newValue, oldValue) {
				setTimeout(() => { //此处定时器的回调一定要写箭头函数
					this.fullName = newValue + '-' + this.lastName
				}, 1000)
			}
		})
	</script>
</body>

</html>