宿州市建设局网站,东莞市常平东部中心医院,企业网站属于广告吗,wordpress调用访问次数Vue监听属性详细介绍 1. 监听属性2. watch 属性3. 计算属性#xff08;Computed Properties#xff09;4. 侦听器#xff08;Listeners#xff09;方法5. .sync 修饰符6. 注意事项 1. 监听属性
在Vue中#xff0c;监听属性是一个十分重要的特性#xff0c;它允许你监听和… Vue监听属性详细介绍 1. 监听属性2. watch 属性3. 计算属性Computed Properties4. 侦听器Listeners方法5. .sync 修饰符6. 注意事项 1. 监听属性
在Vue中监听属性是一个十分重要的特性它允许你监听和响应数据变化监听器可以用来执行代码每当一个特定属性变化时就会触发。
使用场景我们可以使用监听属性watch来响应数据的变量 当需要在数据变化时执行异步或开销较大的操作时这种方式比较有用回想一下是否做过下拉列表的级联选择 watch声明语法:
watch: {xxxx: function(val) {//监听器实现}
}示例 米和厘米的单位换算 设置监听器
var vm new Vue({el: #app,data: {m: 1,cm: 100},//设置监听属性watch: {m: function(val) {if(val)this.cm parseInt(val) * 100;elsethis.cm ;},cm: function(val) {if(val)this.m parseInt(val) / 100;elsethis.m ;}}});HTML中使用v-model实现与数据的双向绑定
div!--注意v-model的双向绑定--米: input typetext v-modelm厘米: input typetext v-modelcm
/divVue 提供了几种不同的方法来监听数据变化
2. watch 属性
在 Vue 组件中你可以使用 watch 选项来观察和响应 Vue 实例上数据的变化当你需要在数据变化时执行异步或者开销较大的操作时这是最有用的。
new Vue({data() {return {someData: }},watch: {// 如果 someData 发生改变这个函数就会运行someData(newValue, oldValue) {// 做一些事情}}
});3. 计算属性Computed Properties
计算属性本质上是基于他们的依赖进行缓存的 watcher只有在相关依赖发生变化时才会重新求值。
new Vue({data() {return {someOtherData: }},computed: {// 计算属性的 gettersomeComputedProp() {// this.someOtherData 是响应式依赖return this.someOtherData.trim().toLowerCase();}}
});当 someOtherData 变化时someComputedProp 将会重新计算。
4. 侦听器Listeners方法
使用 $watch API 来监听数据的变化这是编程式的监听方式可以在任何地方添加比如在 created() 或 mounted() 钩子中。
new Vue({data() {return {anotherData: }},created() {this.$watch(anotherData, (newValue, oldValue) {// 做一些事情});}
});5. .sync 修饰符
.sync 修饰符可以用在 props 上以便在子组件中更新父组件的状态这是一个语法糖可以展开为一个自动更新父级属性的 v-on 监听器。
6. 注意事项
使用 watch 的时候要注意性能问题不要过度使用或进行复杂的计算否则可能导致性能问题。计算属性是基于它们的响应式依赖进行缓存只有在依赖发生变化的时候才会重新求值这通常用于有依赖变化的情况下计算新值的场景。使用 vm.$watch() API 监听属性时它返回一个用来解除监听的函数你可以在组件销毁时调用他来停止监听。使用 .sync 修饰符时注意不要在两个方向上修改同一个数据以避免无限的渲染循环问题。这一点在 Vue 3.x 的 Composition API 中通过使用 ref 和 reactive 的响应式系统来提供了更好的解决方案。
