一、Vue计算属性
计算属性本质上就是一个function函数，它可以实时监听data中数据的变化， 并return 一个计算后的新值，供组件渲染DOM时使用。
声明计算属性：计算属性需要以function函数的形式声明到组件的computed选项中
计算属性：
- 计算属性必须定义在computed节点中
- 计算属性必须是一个function函数
- 计算属性必须有返回值
- 计算属性必须当做普通属性使用
export default {
data() {
return {
author: {
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
}
}
},
computed: {
// a computed getter
publishedBooksMessage() {
// `this` points to the component instance
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
}
计算属性vs方法
相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时， 才会重新进行运算。因此计算属性的性能更好
二、Vue组件高级-watch侦听器
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。 watch节点中，定义自己的侦听器
<script>
import axois from "axios"; //npm i axios -S
export default {
name: "MyWatch",
data() {
return {
userName: "",
info: {
userName: "zs",
},
};
},
watch: {
async userName(newVal, oldVal) {
console.log(newVal, oldVal);
const { data: res } = await axois.get(
"https://www.escook.cn/api/finduser/" + newVal
);
console.log(res);
},
async handler(newVal, oldVal) {
const { data: res } = await axois.get(
"https://www.escook.cn/api/finduser/" + newVal
);
console.log(res);
},
//立即触发watch侦听器
immediate: true,
info: {
async handler(newVal) {
const { data: res } = await axois.get(
"https://www.escook.cn/api/finduser/" + newVal.userName
);
console.log(res);
},
//侦听对象属性值的变化
deep: true,
},
"info.userName": {
async handler(newVal) {
const { data: res } = await axois.get(
"https://www.escook.cn/api/finduser/" + newVal
);
console.log(res);
},
},
},
};
</script>
默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器立即被调用，则需要使用immediate选项
当watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。 此时需要使用deep选项
如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch侦听器:
计算属性和侦听器侧重的应用场景不同: 计算属性侧重于监听多个值的变化，最终计算并返回一个新值 侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值
三、组件生命周期
组件的生命周期指的是∶组件从创建->运行（渲染）-→销毁的整个过程，强调的是一个时间段。
- 当组件在内存中被创建完毕之后，会自动调用created函数（发送ajax请求初始数据）
- 当组件被成功的渲染到页面上之后，会自动调用mounted函数（c操作DOM元素）
- 当组件被销毁完毕之后，会自动调用unmounted函数
- 当组件的data 数据更新之后，vue 会自动重新渲染组件的DOM结构，
- 从而保证View视图展示的数据和Model数据源保持一致。
- 当组件的data 数据更新之后，vue 会自动重新渲染组件的DOM结构，
- 从而保证View视图展示的数据和Model数据源保持一致。
- 当组件被重新渲染完毕之后，会自动调用updated生命周期函数。（data数据多次变化，多次调用该函数）
四、组件之间的数据共享 （兄弟组件）
后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据。此时组件之间的嵌套关系比较复杂 可以使用 provide 和 inject 实现后代关系组件之间的数据共享。
全局数据共享 vuex
