vue中watch的详解

Watch概述

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

简单的监听

<body>
<div id="app"><input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>new Vue({el: '#app',data: {num: ''},watch: {num(newVal, oldVal) {// 监听 num 属性的数据变化// 作用 : 只要 num 的值发生变化,这个方法就会被调用// 第一个参数 : 新值// 第二个参数 : 旧值,之前的值console.log('oldVal:',oldVal)console.log('newVal:',newVal)}}})
</script>
</body>

immediate（立即处理进入页面就触发）

<body>
<div id="app"><input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>new Vue({el: '#app',data: {num: 1},watch: {num: {// 数据发生变化就会调用这个函数  handler(newVal, oldVal) {console.log('oldVal:', oldVal)console.log('newVal:', newVal)},// 立即处理 进入页面就触发immediate: true}}})
</script>
</body>

deep（深度监听）

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true

<body>
<div id="app"><input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>new Vue({el: '#app',data: {food: {id: 1,name: '冰激凌'}},methods: {change() {this.food.name = '棒棒糖'}},watch: {// 第一种方式：监听整个对象，每个属性值的变化都会执行handler// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的food: {// 每个属性值发生变化就会调用这个函数handler(newVal, oldVal) {console.log('oldVal:', oldVal)console.log('newVal:', newVal)},// 立即处理 进入页面就触发immediate: true,// 深度监听 属性的变化deep: true},// 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数// 函数执行后，获取的 newVal 值和 oldVal 值不一样'food.name'(newVal, oldVal) {console.log('oldVal:', oldVal)   // 冰激凌console.log('newVal:', newVal)   // 棒棒糖}}})
</script>
</body>

Watch和computed的区别

computed支持缓存，只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存，数据变,直接会触发相应的操作
computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化，而watch支持异步
computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值;而watch监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值
如果一个属性是由其它属性计算而来的，这个属性依赖其它属性，多对一或者一对一，一般用computed；而当一个属性发生变化时，需要执行对应的操作，一对多，一般用watch

vue中watch的详解相关推荐

vue中mint-ui使用详解
这次给大家带来vue中mint-ui使用详解,vue中mint-ui使用的注意事项有哪些,下面就是实战案例,一起来看一下. mint-ui在vue中的使用,供大家参考,具体内容如下首先放上mint- ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
在vue中引入css,详解在Vue中有条件地使用CSS类
详解在Vue中有条件地使用CSS类 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了详解在Vue中有条件地使用CSS类,编程之家小编觉得挺不 ...
Vue中$refs 使用详解
js中想要获取dom节点一般用document.querySelecto('.input'),然后获取input的值. 在vue中绑定ref就不需要在获取dom节点了,直接绑定在input上,然后 $ ...
php watcher,vue 中的 watcher详解
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher .这是为什么 Vue 提供一个更通用的方法通过watch 选项,来响应数据的变化.当你想要在数据变化响应时,执行异步操作或开 ...
Vue中的v-slot详解，作用域插槽和具名插槽
1.具名插槽有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场. //组件调用时 <MyFooter v-red :age.sync="age"> ...
关于Vue中props的详解
看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数 ...
Vue学习：Vue中的路由详解（完整版）
一.vue-router的理解首先,需要理解一下vue-router: vue-router是vue的一个插件,专门用来实现SPA应用.SPA也就是单页Web应用,特点是:整个应用只有一个完整的页 ...
Vue中过滤器用法详解
一.什么是过滤器 Vue.js官方文档说明:可被用于一些常见的文本格式化. 个人理解就是把一些不需要的东西过滤掉,只是对数据进行加工处理然后返回处理后的数据,和计算属性很相似. 二.如何使用过滤器过 ...

vue中watch的详解

Watch概述

简单的监听

immediate（立即处理进入页面就触发）

deep（深度监听）

Watch和computed的区别

vue中watch的详解相关推荐

最新文章

热门文章

vue中watch的详解

Watch概述

简单的监听

immediate（立即处理 进入页面就触发）

deep（深度监听）

Watch和computed的区别

vue中watch的详解相关推荐

最新文章

热门文章

immediate（立即处理进入页面就触发）