计算属性
点击查看 Vue文档
基础语法
多次使用计算属性，计算属性方法也只执行一次，
调用计算属性的方法不能加()
直接修改计算数学的值
计算属性不能通过双向绑定修改（默认不能改）
想要修改计算属性，就必须使用计算属性的完整写法
完整写法
计算属性：{
//计算属性默认只有get，在需要的时候添加set()
get(){
return 结果
},
ser(val){
//val就是修改后的计算属性
}
}
使用计算属性筛选输入框数据举例
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
<input v-model="message" />
//records2是计算属性未在data中定义
<li v-for="item in records2"></li>
data(){
return {
messgae:''，
record:{[],[]...}//展示的数据
}
}
computed：{
records2(){
//这里的record2依赖于this.message
if(this.message==='')
{return this.records}
else{
//当
return this.records.filter(item=>item.docotor===this.keywords)
}
}
}
watch侦听器
作用：侦听数据变化，执行一些业务逻辑或异步操作
如果监听对象中的属性，不能直接当函数名，需要加上引号
监听from、q、to变化时，都要重新翻译，则可以直接监听一个对象
watch:{
数据：{
handler(变化后的值，变化前的值)
},
deep：true ,//加入改配置，表示深度监听：当对象的任意属性值改变后，都可以侦听到
immediate:true//立即侦听（页面刷新，马上执行一次handler函数）
}
watch的两种写法
函数
watch:{
watchData(newValue,oldValue){
//newValue时属性变化后的值，oldValue是属性变化前的值
//对应的操作...
}
}
对象
watch:{
watchData:{
handler: function(newValue, oldValue) {
//newValue时属性变化后的值，oldValue是属性变化前的值
// 对应的操作...
}
}
}
watch还有立即监听和深度监听
生命周期
Vue生命周期函数（钩子函数）自动执行的函数
每个阶段对应两个钩子函数
<div id="app">
<h2>{{title}}</h2>
<button @click="count--">-</button>
<span>{{count}}</span><button @click="count++">+</button>
</div>
<script src="../utils/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
title: '钩子函数演示',
count: 100
},
// 创建阶段
beforeCreate() {
console.log('beforeCreate：', this.count); //此时还不能使用data数据以及调用methods方法
},
created() {
console.log('created:', this.count); //此时可以使用data数据，可以调用methods方法
},
// 挂在阶段
beforeMount() {
console.log('beforeMount:', document.querySelector('h2'));
},
mounted() {
console.log('beforeMount:', document.querySelector('h2'));
},
// 更新阶段（数据更新才触发）
beforeUpdate() {
// 数据更新了但是页面还没有更新
console.log('beforeUpdated:', this.count, document.querySelector('span').innerHTML);
},
updated() {
// 数据、页面都更新
console.log('updated:', this.count, document.querySelector('span').innerHTML);
}
})
</script>
