上一节我们初始化了一个vue项目，这节课开始我们学习vue的使用语法
生命周期
创建阶段
beforeCreate 初始化事件和生命周期
created 实例已完成数据观测、属性、方法、侦听器。然而，挂载阶段还没开始，$el 属性目前尚不可用。
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用
render
mounted 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
更新阶段
beforeUpdate 数据更新时调用，手动移除已添加的事件监听器。
render
updated 操作DOM添加事件监听器，不可更改依赖数据
销毁阶段
beforeDestroy 移除已添加的事件监听器，计时器等
destroyed
父子组件生命周期
加载阶段
父组件beforeCreate
父组件created
父组件beforeMount
子组件beforeCreate
子组件created
子组件beforeMount
子组件mounted
父组件mounted
更新阶段
父组件beforeUpdate
子组件beforeUpdate
子组件updated
父组件updateds
销毁阶段
父组件beforeDestroy
子组件beforeDestroy
子组件destroyed
父组件destroyed
关于keep-alive的两个生命周期
activated
被 keep-alive 缓存的组件激活时调用
deactivated
被 keep-alive 缓存的组件停用时调用
计算属性（computed）
计算结果并返回，只有当被计算的值发生改变时才会触发 (即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算) 主要用于处理计算逻辑比较复杂的运算，计算属性默认只有getter方法，如果需要你也可以加一个setter方法
// 当firstName和lastName发生改变时触发
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
侦听器（watch）
监听某一个值，当被监听的值发生变化时，执行对应的操作 (与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果)
<div>
<input v-model="a" />
</div>
export default {
name: "bCom",
data() {
return {
a: 1,
b: {
c: 2
},
d: {
e: 3
}
};
},
watch: {
a(val, oldVal) {
console.log("val: ", val, "oldVal: ", oldVal);
this.b.c += 1;
this.d.e += 1;
},
b: {
handler(val, oldVal) {
console.log("b触发了 ",'val: ',val,'oldVal: ',oldVal);
}
},
d: {
handler(val,oldVal) {
console.log("d触发了 ",'val: ',val,'oldVal: ',oldVal);
},
// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深，默认为false
deep: true
}
}
};
计算属性VS方法
- 计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。
- 而每当触发重新渲染时，调用方法将总会再次执行函数。
<div>计算属性方式：{{ reveres1 }}</div>
<div>方法方式：{{ reveresMethod2() }}</div>
<button @click="() => $forceUpdate()">改变</button>
<input v-model="message"></div>
export default {
name: "aCom",
data() {
return {
message: 'Hello World'
}
},
computed: {
reveres1() {
console.log('执行了reveres1');
return this.message.split('').reverse().join('');
}
},
methods: {
reveresMethod2() {
console.log('执行了reveresMethod2');
return this.message.split('').reverse().join('');
}
}
};
计算属性VS侦听器
- 改变一个或多个元素的值（双向绑定的元素），去修改一个元素的值
- 改变一个元素的值（双向绑定的元素），去修改多个元素的值
<div>
<input v-model="firstName" />
<br />
<input v-model="lastName" />
<h3>计算属性</h3>
<div>{{ name1 }}</div>
<h3>侦听器</h3>
<div>{{ fullName }}</div>
</div>
export default {
name: "bCom",
data() {
return {
firstName: "dai",
lastName: "jun",
fullName: ""
};
},
computed: {
name1() {
return this.firstName + "" + this.lastName;
}
},
watch: {
firstName(val) {
this.fullName = val + "" + this.lastName;
},
lastName(val) {
this.fullName = this.firstName + "" + val;
}
}
};
