精华内容
下载资源
问答
  • 主要介绍了vue watch普通监听和深度监听(数组和对象),文中单独通过代码给大家介绍了vue watch 深度监听的方法,感兴趣的朋友一起看看吧
  • <template> <div id="app"> <ul> <li v-for="item in list" :v-key="item.id">{{item.name}}</li> </ul> <div> <input type="text" v-model="value" /&...
    <template>
    	<div id="app">
    		<ul>
    			<li v-for="item in list" :v-key="item.id">{{item.name}}</li>
    		</ul>
    		<div>
    			<input type="text" v-model="value" />
    			<button @click="add()">添加</button>
    			<button @click="change()">改变</button>
    		</div>
    	</div>
    </template>
    
    <script>
    	export default {
    		name: 'App',
    		components: {},
    		data() {
    			return {
    				list: [{
    						id: 1,
    						name: '张三'
    					},
    					{
    						id: 2,
    						name: '李四',
    						ceshi:0,
    						list:[
    							{
    								a:0
    							}
    						]
    					}
    				],
    				value: '45'
    			}
    		},
    		created() {
    
    		},
    		mounted() {
    
    		},
    		watch: {
    			list: {
    				handler(newName, oldName) {
    					console.log('触发监听',this.list,this.list[1].list[0].a);
    				},
    				// 开启深度监听
    				deep: true
    			}
    		},
    		methods: {
    			add() {
    				console.log(this.value)
    				const listItem = {
    					id: this.list.length,
    					name: this.value
    				}
    				this.list.push(listItem)
    			},
    			change() {
    				// this.list[1].name = this.list[1].name === "赵四" ? '李四' : '赵四'
    				this.list[1].list[0].a=this.list[1].list[0].a=== 0 ? 1 : 0
    			}
    		}
    	}
    </script>
    
    展开全文
  • 关于watch监听数组的问题

    千次阅读 2020-12-30 16:54:10
    注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。这样是可以监听到的mounted() {this.$service.enableInvoiceOrders(this.$route....

    注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

    这样是可以监听到的

    mounted() {

    this.$service.enableInvoiceOrders(this.$route.params.orderType).then(res => {

    console.log(res)

    if (res.code == 0) {

    // watch监听数组先处理初始值 再赋值 最后再监听

    //我的理解也就是会监听两次一次判断是否数组 一次赋值是否变异

    res.data.records.forEach(item => {

    item.isSelectItem = false

    })

    this.orderArr = res.data.records

    // 相当于变异了

    // this.orderArr.forEach(item => {

    // item.isSelectItem = false

    // })

    }

    })

    },

    watch: {

    orderArr: {

    deep: true,

    handler(val, oldVal) {

    console.log(val, '==数据==')

    this.ischeckAll = val.every(item => {

    return item.isSelectItem

    })

    }

    }

    }

    这样监听不到

    mounted() {

    this.$service.enableInvoiceOrders(this.$route.params.orderType).then(res => {

    console.log(res)

    if (res.code == 0) {

    this.orderArr = res.data.records

    // 相当于变异了

    this.orderArr.forEach(item => {

    item.isSelectItem = false

    })

    }

    })

    },

    watch: {

    orderArr: {

    deep: true,

    handler(val, oldVal) {

    console.log(val, '==数据==')

    this.ischeckAll = val.every(item => {

    return item.isSelectItem

    })

    }

    }

    }

    关于深度监听 如果数组不深度监听 相当于只监听一个数组的地址

    注意:最好不要监听数组或者对象 这样内存消耗比较大

    展开全文
  • 一、监听数组1.watch能监听到数组的push的改变,例如data () {return {demo: [1,2]}},mounted(){window.myVue =this},watch: {demo(val){console.log(val)}},myVue.demo.push(3) //[1,2,3]2.watch不能检测以下变动的...

    一、监听数组

    1.watch能监听到数组的push的改变,例如

    data () {

    return {

    demo: [1,2]

    }

    },

    mounted (){

    window.myVue = this

    },

    watch: {

    demo(val){

    console.log(val)

    }

    },

    myVue.demo.push(3) //[1,2,3]

    2.watch 不能检测以下变动的数组:

    当你利用索引直接设置一个项时,例如:myVue.demo[1] = 5

    当你修改数组的长度时,例如:myVue.demo.length = 2

    这时候你可以删除原有键,再 $set 一个新的,这样就可以触发watch

    myVue.$set(myVue.demo,0,8) // [8,2,3]

    3.更复杂一点,你想对数组嵌套对象进行监听的时候,这时就需要深度监听

    data () {

    return {

    demo:[

    {

    name:'张三',

    age:18

    },

    {

    name:'李四',

    age:20

    }

    ]

    }

    },

    mounted (){

    window.myVue = this

    },

    watch: {

    demo: {

    handler (val) {

    console.log(val)

    },

    // 这里是关键,代表递归监听 demo 的变化

    deep: true

    }

    },

    myVue.demo[0].age = 30 //[{name:'张三',age:30},{name:'李四',age:20}]

    二、监听对象

    1.可以类似上面数组的第3点

    2.可以直接监听对象中的值

    data () {

    return {

    demo:{

    name: '张三',

    child: {

    name: '李四',

    age: 20

    }

    }

    }

    },

    mounted (){

    window.myVue = this

    },

    watch: {

    'demo.child': {

    handler: function (val) {

    console.log(val)

    },

    deep: true

    },

    // 或者

    'demo.name' (val) {

    console.log(val)

    }

    },

    myVue.demo.name = '王二' //王二

    myVue.demo.age = '80' //{name:'李四',age:80}

    展开全文
  •   监听一个数组数组中的每个元素都是对象,如果某个对象中的属性值变化时,watch中的val 和 oldval是一样的值   结构如: let arr = [ { a: 1, b: 2, c: 3}, { a: 1, b: 2, c: 3} ] 解决方法 computed: { ...

    背景

      监听一个数组,数组中的每个元素都是对象,如果某个对象中的属性值变化时,watch中的val 和 oldval是一样的值
      结构如:

    let arr = [
    	{ a: 1, b: 2, c: 3},
    	{ a: 1, b: 2, c: 3}
    ]
    

    解决方法

    computed: {
    	newArr : function() {
    		return JSON.parse(JSON.stringify(this.arr))
    	}
    }
    

    在计算属性中写一个新的数组,值为JSON.parse(JSON.stringify)原数组得来的,这样arr变化时,也会触发计算属性,newArr也会变化

    watch: {
    	newArr: {
    		handler: function(val, oldval){
    			console.log(val, oldval)
    		},
    		deep: true
    	}
    }
    

    这样的话,可以在val和oldval看到不同

    展开全文
  • Watch监听数组或对象

    2021-09-05 22:46:50
    handler:监听数组或对象的属性时用到的方法 deep:深度监听,为了发现对象内部值的变化,可以在选项参数中指定 deep:true 。注意监听数组的变动不需要这么做。...2,watch监听数组: data() { return { w
  • Vue监听数组 watch监听

    千次阅读 2020-10-05 15:48:53
    Vue中监听数组解析 1,简单监听一个参数,demo如下 data() { return { msg: "test---test", } }, watch: { msg(newVal, oldVal) { console.log(newVal) console.log(oldVal) }, }, created() { thi
  • 这玩意我几乎是第一次用,由于仿PS那种画图的,比较复杂,成功地用到了这种,是用于数据传递第一次不成功,即不是深度监听,比如 我有一个对象,我要监听这个对象,这个对象有x y坐标,只要坐标变一点,都要即时监听的到,于是...
  • 第一个浅度监听:{{a}}{{b}}var vm=new Vue({el:"#app",data:{a:10,b:15}});vm.$watch("a",function(){alert('a...document.onclick=function(){vm.a=2}第二个深度监听{{a|json}}{{b}}var vm = new Vue({el: "#app...
  • 首先说一下,watch的基本用法: watch: { indexList: { handler(newVal, oldVal) { if (this.indexList.length !== 0) { this.rightBtnText = '确定'; } }, deep: true } }...
  • vue-watch监听对象数组的变化

    千次阅读 2021-03-01 09:22:54
    1.对数组嵌套对象进行监听的时候,这时就需要深度监听 listData: { handler (val) { console.log(val); this.paginationChange(); }, // 这里是关键,代表递归监听 demo 的变化 deep: true }, 2.监听对象 ...
  • 1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度监听 ...
  • vue的watch监听数组或者数组下标值

    千次阅读 2019-10-27 15:45:28
    watch: { "ruleForm.urls.0.gdurl":function(val, oldVal) { console.log(val); }, } 那个0就是下标 只会监听这个数组0下标的值改动
  • angular $watch学习(监听数组)

    千次阅读 2016-12-18 20:31:16
    $watch 监听数组 文章参考 http://blog.csdn.net/u010451286/article/details/50635839 问题: 发现用上面两种方法去监视数组时,会发现即使数组的内容改变了,也没有触发到这个匿名函数? 分析: watch函数...
  • watch监听数组或者对象)

    千次阅读 2019-09-24 12:47:53
    deep:深度监听,为了发现对象内部值的变化,可以在选项参数中指定 deep:true 。注意监听数组的变动不需要这么做。 immediate: 在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调 tips: 只要bet中...
  • 【vue】watch监听数组变化

    千次阅读 2019-04-07 23:26:00
    watch: {  list: {  deep: true,//深度监听  handler: function() {  dosomething  }  } }, 转载于:https://www.cnblogs.com/kevinmajesty/p/10668066.html...
  • vue 监听数组对象 深度监听

    千次阅读 2018-11-29 19:04:40
    watch: { //监视交核实题目这个开关,如果是开启,才能有添加按钮 SwitchOne(val){ alert("---hahha 开关被监视了",val) if(val){ this.isShowAddBtn = true; }else{ this.isShowAddBtn = false; ...
  • 我刚开始对数组里的对象属性监听 监听一个对象及属性 同样也可以设置计算属性computed来监听 首次加载不调用监听函数 我刚开始对数组里的对象属性监听 以下对象里的newValue是改变后的新值,oldValue是改变之前...
  • vue 使用ts 深度监听数组与对象设置

    千次阅读 2019-05-24 14:47:24
    直接代码。。。 @Watch('viewConfigArray', { deep: true }) handleWatch(){ console.log('监听上面数组的内容') }
  • successList:[] //被监听的数据 this.$watch('successList', { handler(n) { console.log(n) }, deep: true }) //实现深度监听
  • 因为watch虽然监听到对象(或数组)内部变化,但是由于新旧值同源,导致没有更新。可采用computed计算属性进行对源对象的深拷贝,完成新值更新。如下: let vm = new Vue({ el:"#box", data:{ list:[], isShow:...
  • 解决办法,配合computed深度复制,例如监听DeviceList data() { return { DeviceList:[], }; }, computed:{ NewDeviceList(){ // 新的赋值 return JSON.parse(JSON.stringify(this.DeviceList)); } }, ...
  • VUE深度监听一个对象数组

    千次阅读 2020-02-27 11:34:29
    使用watch直接监听数组studentList的变化,没有效果,原因是: 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,767
精华内容 1,906
关键字:

watch深度监听数组