一、Dependencies 是什么？
Vue.js 通过一种叫做 Dependencies 的技术来追踪数据变化。具体来说，当状态发生变化时，Vue.js 会重新渲染页面。在 Vue.js 中，组件化是核心概念，而 Dependencies 则可以在不同组件之间进行通信和共享状态。Vue.js 提供了两种类型的 Dependencies：computed 和 watch。
二、Computed Dependencies
Computed Dependencies 可以理解为计算属性，根据已有状态计算派生状态，从而实现数据的自动更新。它的特点如下：
1、计算属性是基于它们的依赖缓存的。只有在它的依赖发生改变时才会重新计算其值。
2、计算属性可以依赖别的计算属性。如果某个计算属性依赖了其他的计算属性，当这个计算属性的依赖发生变化时也会重新计算，从而实现了多层级依赖计算。
<template>
<div>
<p>热量：{{ totalCalories }} 千卡</p>
<div>
<p>米饭：<input v-model="riceCalories"> 千卡<p>
<p>鸡肉：<input v-model="chickenCalories"> 千卡<p>
<p>油菜：<input v-model="oilVegetableCalories"> 千卡<p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
riceCalories: 0,
chickenCalories: 0,
oilVegetableCalories: 0,
}
},
computed: {
totalCalories() {
return Number(this.riceCalories) + Number(this.chickenCalories) + Number(this.oilVegetableCalories)
}
}
}
</script>
三、Watch Dependencies
Watch Dependencies 相比 Computed Dependencies 更加灵活，可以无需依赖其它数据，而实现数据的监控和响应。它的特点如下：
1、监听某个特定数据的变化，当数据发生变化时执行相应的逻辑。
2、通过 options.deep 实现对对象或数组的监听，如果监听的对象里的某个属性变化了，也会立刻触发 watch。
<template>
<div>
<p>性别：{{ gender }}</p>
<button @click="toggleGender">切换性别</button>
</div>
</template>
<script>
export default {
data() {
return {
isMale: true,
}
},
watch: {
isMale(newVal) {
this.gender = newVal ? '男' : '女'
},
},
methods: {
toggleGender() {
this.isMale = !this.isMale
},
},
}
</script>
四、总结
Dependencies 是 Vue.js 组件中十分重要的概念之一，它实现了状态的自动更新和数据的共享。Computed Dependencies 可以理解为计算属性，通过依赖缓存实现状态的计算和更新；而 Watch Dependencies 则是数据的监听和响应，提供了其他逻辑的钩子函数，实现了更加灵活的数据管理。通过理解 Dependencies 和掌握其相关的技术，开发者能够更高效地构建 Vue.js 应用。
原创文章，作者：OAEXZ，如若转载，请注明出处：https://www.506064.com/n/360925.html
微信扫一扫 
支付宝扫一扫 