[Vue] vue学习笔记(2): 监视属性 & 计算属性

关于计算属性

案例：分别输入姓和名，打印全名

基本代码

<div id='root'>
	first name<input type="text" v-model="firstname"><br/><br/>
	last name<input type="text" v-model="lastname"><br/><br/>
	fullname: <span>???</span>
</div>
 
<script type="text/javascript">
new Vue({
	el: "#root",
	data: {
		firstName: "Aisen",
		lastName: "Rowell"
	}
})
</script>

1. 使用插值语法
   fullname: <span>{{firstname}} - {{lastname}}</span>
2. methods属性
   fullname: <span>{{fullname()}}</span>

vue对象配置

<!---vue instance--->
<script type="text/javascript">
new Vue({
	el: "#root",
	data: {
		firstName: "Aisen",
		lastName: "Rolwell"
	},
	methods: {
		fullname(){
			return this.firstname + '-' + this.lastname
		}
	},
})
</script>

当然也可以使用计算属性

计算属性

读取的属性需要通过已有的属性计算得来

fullname: <span>{{fullname()}}</span>
<!---vue instance--->
<script type="text/javascript">
const v = new Vue({
	el: "#root",
	data: {
		firstName: "Aisen",
		lastName: "Rowell"
	},
	computed: {
		fullname: {
			// getter was called when fullname was read
			// return a value as fullname
			get() {
				console.log("getter called.")
				return this.firstname + '-' + this.lastname
			}
			
			// setter was called when the value was changed
			set(value) {
				console.log("value changed")
				const arr = value.split('-')
				this.firstname = arr[0]
				this.lastname = arr[1]
			}
		}
	},
})
</script>

简写: 只有当只读取数据的情况时，即setter被忽略

fullname: <span>{{fullname}}</span>
<!---vue instance--->
<script type="text/javascript">
const v = new Vue({
	el: "#root",
	data: {
		firstName: "Aisen",
		lastName: "Rowell"
	},
	computed: {
		// 完整写法
		/*fullname: {
			// getter was called when fullname was read
			// return a value as fullname
			get() {...}
			// setter was called when the value was changed
			set(value) {...}
		}*/
		
		// 简写,注意这不是函数，而是读取数值时对应的getter方法简写
		fullname(){
			console.log("getter called.")
			return this.firstname + '-' + this.lastname
		}
	},
})
</script>

比较methods属性

优势：存在缓存机制，可以复用。使用计算属性，重复读取某一值时，实际只调用一次；methods属性则需要每次调用方法

监视属性

监视属性中的对象一旦发生变化，对象中的方法会被调用，更新前后的值也会被记录
❗被监视的属性必须存在才能成功监视 ❗ 包括那些来自data属性和computed属性

new Vue({
	// ...
	watch: {
		// value to be watched, was initialied in data property
		isDone: {
			immediate: true, // 初始化时就调用一次handler
			// handler was called when isDone is changed
			handler(newValue, oldValue){
				console.log("isDone is changed to ", oldValue)
			}
		}
	}
})

深度监视

写在前面
🌟 每一个属性配置（data, computed, watch etc.)实际上是包含键值对的对象，即其中的key值应用双引号标明，只是vue支持省略了引号

现在创建一个对象numbers, 包含一个a值，点击令a增加,监视a的变化

<h3>a is {{numbers.a}}</h3>
<button @click="numbers.a++">点我</button>

data: { numbers: { a:1, b:1} }
watch: { "numbers.a":{ handler() {...} } }

如何监控整个numbers呢？➡️ deep深度监控

watch默认不开启深度监视，因此不会监视多层级对象内部的变化

watch: {
	numbers: {
		deep: true,
		handler() {console.log("numbers was changed.")}
	}
}

简写 -- 只有handler选项时，类似computed

watch: {
	isDone(newValue, oldValue){
		console.log("isDone is changed to ", oldValue)
	}
}

另一种写法，适用于预先未知监控对象的情况

vm.$watch("isDone", {
	immediate: true,
	deep:true,
	handler(newValue, oldValue){
		console.log("isDone is changed to ", oldValue)
	}
})
 
// shorthand
vm.$watch("isDone", function(newValue, oldValue){
	console.log("isDone is changed to ", oldValue)
})

watch vs computed

• computed能实现的操作，watch也可以
• watch能实现异步操作如计时器，而computed因为无法返回值给属性所以不行

关于vue对象下的函数

• 所有需要vue管理的函数，最好写成普通函数，这样this指向就是vue对象本身
• 所有不归vue管的函数（计时器回调，ajax回调，promise回调函数），写成箭头函数，这样this指向vue对象或组件实例对象了

💮一个例子💮
解释：因为箭头函数没有申明绑定主体，因此按序向外寻找setTimeout -> firstname -> vm，即主体确定为vm；普通函数主体即为函数的作用域

const vm = new Vue({
	// ...
	watch: {
		firstname(val) {
			setTimeout(()=>{
				console.log(this)  // this = vue instance
			}, 1000)
		}
	}
})