Vue中的 watch监听属性详情
目录
- 一.watch监听一般数据的变化(数值，字符串，布尔值)
- 1.数值
- 2.字符串
- 3.布尔值
- 二.watch 监听 复杂类型数据的变化
- 1.对象
- 2.数组
- 3.对象数组
- 4.对象数组的属性
首先要确认 watch是一个对象，要当成对象来使用。
键：就是那个，你要监听的那个家伙；
值：可以是函数，当你监控的家伙发生变化时，需要执行的函数，这个函数有两个形参
第一个是当前值（新的值），第二个是更新前的值（旧值）
值也可以是函数名：不过这个函数名要用单引号来包裹。
值是包括选项的对象：选项包括有三个。
- 1.第一个
handler：其值是一个回调函数。即监听到变化时应该执行的函数。 - 2.第二个是
deep：其值是 true 或 false；确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。) - 3.第三个是
immediate：其值是 true 或 false；确认是否以当前的初始值执行 handler 的函数。
一.watch监听一般数据的变化(数值，字符串，布尔值)
举例说明：
1.数值
在data数据中心的num，当我们通过点击事件让它发生变化时，通过watch监听属性监听它的变化
<div id="app">
<p>{{num}}</p>
<button @click="num++">点击加一</button>
</div>
let vm = new Vue({
el:'#app',
data:{
num:0
},
watch:{
// 当前值（已经改变的值）newval 旧值 oldval
num:function(newval,oldval){
console.log("新值是："+newval);
console.log("旧值是："+oldval);
}
}
})
当我们点击按钮时，查看控制台：
注意：在watch中还有其他两种方法
watch:{
// 当前值（已经改变的值）newval 旧值 oldval
// num(newval,oldval){
// console.log("新值是："+newval);
// console.log("旧值是："+oldval);
// }
num:{
handler(newval,oldval){
console.log("新值是："+newval);
console.log("旧值是："+oldval);
}
}
}
输出结果是一致的，下面的例子统一使用第三种方法，也就是带handler的方法。
2.字符串
<div id="app">
<input type="text" v-model="mes">
<p>输入的内容为：{{mes}}</p>
</div>
let vm = new Vue({
el:'#app',
data:{
mes:''
},
watch:{
mes:{
handler(newval,oldval){
console.log("新的内容："+newval);
console.log("旧的内容："+oldval);
}
}
}
})
当我们在文本框内输入内容时：
查看输出结果：
3.布尔值
<div id="app">
<p v-show="isShow">通过修改布尔值显示和隐藏</p>
<button @click="isShow = !isShow">点击改变布尔值</button>
</div>
let vm = new Vue({
el:'#app',
data:{
isShow:true
},
watch:{
isShow:{
handler(newval,oldval){
console.log("新的值："+newval);
console.log("旧的值："+oldval);
}
}
}
})
当点击按钮切换时，查看控制台：
二.watch 监听 复杂类型数据的变化
deep 属性：深度监听对象变化 (代表是否深度监听)，当需要监听一个对象的改变时，普通的 watch 方法无法监听到对象内部属性的改变，此时就需要 deep 属性对对象进行深度监听。
1.对象
<div id="app">
<input type="text" v-model="mes.name">
<p>输入的内容是：{{mes.name}}</p>
</div>
let vm = new Vue({
el:'#app',
data:{
mes:{name:''}
},
watch: {
mes:{
// watch监听属性监听对象时新旧值时相同的
handler(newval){
console.log("新值为："+this.mes.name);
},
deep:true
}
}
})
在文本框中输入内容后，查看控制台：
也可以在对象中添加num，通过滑动杆来控制num的值，并监听：
<input type="range" v-model="mes.num">
data:{
mes:{name:'',num:''}
},
watch: {
mes:{
// watch监听属性监听对象时新旧值时相同的
handler(newval){
console.log("num新值："+this.mes.num);
},
deep:true
}
}
滑动时查看输出结果：
2.数组
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">{{item}}</li>
</ul>
<!-- 添加一个按钮，点击时往数组中添加一个新内容 -->
<button @click="add()">点击添加</button>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
arr:[1,2,3,4,5]
},
methods:{
add(){
// 获取当前数组最大值
let cont = this.arr[this.arr.length-1];
// 自增
cont++;
// 向数组最后一位添加元素
this.arr.push(cont);
}
},
watch: {
arr:{
// 监听数组的时候不需要深度监听，不需要deep
handler(newval){
console.log("新数组为："+newval);
}
}
}
})
</script>
</body>
点击添加元素后，查看输出结果：
3.对象数组
<body>
<div id="app">
<ul>
<li v-for="item in list">
{{item.id}}--{{item.name}}
</li>
</ul>
<!-- 定义文本框，向数组中添加新的对象 -->
<input type="text" v-model="id">
<input type="text" v-model="name">
<button @click="add()">添加</button>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
list:[
{id:1,name:"哇哈"},
{id:2,name:"哇哈哈"},
{id:3,name:"哇哈哈哈"}
],
id:"",
name:''
},
methods: {
// 将收到的输入内容添加到数组中
add(){
this.list.push({id:this.id,name:this.name});
// 清除文本框的内容
this.id=this.name=''
}
},
watch:{
// 注意：watch对象中监听的数据，一定是数据中心data中已经存在的数据
// watch监听数组对象 新，旧值是相等，但是监听数组的时候，不需要 深度监听！
list:{
handler(newval){
newval.forEach((item)=>{
console.log(item.name);
})
}
}
}
})
</script>
</body>
添加新元素后查看输出结果：
4.对象数组的属性
<body>
<div id="app">
<ul>
<li v-for="x in list">
{{x.id}}---{{x.name}}  
<button @click="mod(x.id)">修改</button>
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'ww'},
{id:2,name:'ee'},
{id:3,name:'qq'}
],
},
methods: {
mod(id,name){
this.list.forEach((item)=>{
// 在遍历的过程中做判断，如果你点击的id就是你当前编辑的这一条数据
if(item.id == id){
item.name = "老铁"
console.log(item);
}
})
}
},
watch: {
list:{
handler(x,y){
x.forEach((element)=>{
console.log(element.name);
})
},
deep:true
}
}
})
</script>
</body>
点击修改时，查看输出结果：
到此这篇关于Vue中的 watch监听属性详情的文章就介绍到这了,更多相关Vue中的 watch监听属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
解决Vue2.0 watch对象属性变化监听不到的问题
问题 很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性.发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了. 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除. 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式: 通过vue的this.$set(object, key, value)方法 通过Object.assign()
-
vue中的watch监听数据变化及watch中各属性的详解
首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep
-
vue计算属性computed、事件、监听器watch的使用讲解
一.计算属性(computed) <template> <div class="box"> <h1>计算属性</h1> <hr> <!-- 直接渲染得到数据 --> <p><input type="text" v-model="message"></p> <!-- 对data的数据进行简单的操作 这样有一个不好的地方就是后期对页面数据
-
Vue2 监听属性改变watch的实例代码
效果: 代码: <div id="app2"> <label>幼儿园入学年龄(3-6):</label><input type="number" v-model="child.age"> <button @click="older"> + </button> <button @click="younger"> - </
-
Vue使用watch监听一个对象中的属性的实现方法
问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], }, 第一种解决方案:直接对象 现在我需要监听这个queryData,我可以这样做: watch: { queryData: { handler: function() { //do something }, deep: true } } 第二种解决方案:dee
-
vue watch关于对象内的属性监听
vue可以通过watch监听data内数据的变化.通常写法是: data: { a: 100 }, watch: { a(newval, oldVal) { // 做点什么... console.log(newval, oldVal) } } vue监听整个对象,如下: •deep: true 深度监测 data: { return { msg: { name: 'hahah', color: 'red' } } } watch: { msg: { handler(newValue, oldVa
-
Vue中的 watch监听属性详情
目录 一.watch监听一般数据的变化(数值,字符串,布尔值) 1.数值 2.字符串 3.布尔值 二.watch 监听 复杂类型数据的变化 1.对象 2.数组 3.对象数组 4.对象数组的属性 首先要确认 watch是一个对象,要当成对象来使用. 键:就是那个,你要监听的那个家伙: 值:可以是函数,当你监控的家伙发生变化时,需要执行的函数,这个函数有两个形参 第一个是当前值(新的值),第二个是更新前的值(旧值) 值也可以是函数名:不过这个函数名要用单引号来包裹. 值是包括选项的对象:选项包括有三
-
vue正确使用watch监听属性变化方式
目录 基本用法 监听object 使用deep参数 重新赋值 通过路径监听内部数据 初始化变量触发监听回调 总结 Vue中可以使用监听器监听属性的变化,并根据属性变化作出响应.但一旦涉及到复杂数据的监听(如Object,但数组一般不需要,因为Vue针对数组做了特殊处理)时就比较复杂了,本文解释了使用watch监听属性变化的方法,包括复杂数据. 基本用法 Vue watch最重要的使用场景是根据某属性的变化执行某些业务逻辑: <template> <input type="n
-
详解vue中v-on事件监听指令的基本用法
一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三
-
vue中是怎样监听数组变化的
我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push.splice.pop等方法改变数组元素时并不会触发数组的setter,这就会造成使用上述方法改变数组后,页面上并不能及时体现这些变化,也就是数组数据变化不是响应式的(对上述不了解的可以参考这篇文章).但实际用vue开发时,对于响应式数组,使用push.splice.pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢? 通过vue源码可以看出,vue
-
Vue中的数据监听和数据交互案例解析
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&
-
vue中如何实时监听本地存储
目录 如何实时监听本地存储 vue监听数据变化 watch的基本用法 获取前一次的值 handler方法和immediate属性 deep 深度侦听 如何实时监听本地存储 在main.js中 Vue.prototype.$addStorageEvent = function (type, key, data) { if (type === 1) { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('StorageE
-
Vue中的计算属性与监听属性
目录 一.为什么要使用计算属性 什么是计算属性 二.计算属性和方法的区别 1.区别 2.计算属性使用场景 三.修改计算属性的值 总结 四.监听属性 1.监听普通属性 2.监听属性和计算属性的区别 3.监听复杂对象 一.为什么要使用计算属性 什么是计算属性 计算属性:可以理解为能够在里面写一些计算逻辑的属性.具有如下的作用: 减少模板中的计算逻辑. 数据缓存.当我们的数据没有变化的时候,不会再次执行计算的过程. 依赖固定的数据类型(响应式数据),不能是普通的传入的一个全局数据. 在数据量比较大的时
-
vue.js 1.x与2.0中js实时监听input值的变化
一.vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-element 将写成这样: ref="myElement" , v-ref:my-component 变成了这样: ref="myComponent" .绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例. 因为 v-ref 不再是一个指令
-
详解Vue的监听属性
目录 Vue监听属性 什么是监听属性? 监听属性和计算属性的区别? 监听属性的使用 深度监听 立即调用 总结 Vue监听属性 什么是监听属性? 所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应,监听属性,意思就是可以监视其他数据的变化. 监听属性和计算属性的区别? 计算属性是依赖的值改变后重新计算结果更新DOM,会进行缓存. 属性监听的是属性值,当定义的值发生变化时,执行相对应的函数. 最主要的用途区别: 计算属性不能执行异步任务.计算属性一般不会用来向服务器请求或者执行异步任