vue2里的重要API整理(一)

2023-12-20 02:35:29

1.$nextTick
当动态地渲染html时,接着又要这个动态html做DOM操作时,可以使用这个API来实现。它的功能与updated的功能类似。

methods: {
    // ...   
example: function(){
      // 修改数据   
  this.message = 'changed'     
// DOM 还没有更新   
  this.$nextTick(function(){
 // DOM 现在更新了       
// `this` 绑定到当前实例       
this.doSomethingElse()
      })
    }
  }

2.$forceUpdate()

vue响应式是有缺陷的。当声明式变量嵌套层级过深时,其响应式是没有作用的,也就是说“声明式变量明明已经发生了变化,但视图不更新”。这时使用这个api来强制触发更新视图。

changeInfo() {
 this.info.list[0].a.b.c.d.e = 200
 // 假如:明明data更新成功了,但视图不更新。
 this.$forceUpdate()
}

3.watch

watch 用于监控数据修改,其属性即为所监控的数据,当数据修改会执行相应的处理方法。

watch 的使用有多种方式,包括 string 方式,function 方式, array 方式和 object 方式。

string方式

 watch: {
        name: 'handleNameChange'
    },
    methods: {
        handleNameChange() {
            console.log('name change') // 1s 后 name change
        }
    }

function 方式

 watch: {
        name() {
            console.log('name change') // 1s 后 name change
        }
    },

array 方式

 watch: {
        name: [
            function() { console.log('name change 1') }, // 1s 后 name change 1
            function() { console.log('name change 2') }, // 1s 后 name change 2
        ]
    },

object 方式

deep 属性:深度监听多层嵌套对象类型数据的属性变化。

data() {
        return {
            person: {
                name: 'ming',
                age: 18,
                obj: {
                    a: {
                        data: 1
                    }
                }
            }
        }
    },
    watch: {
        person: {
            handler() {
                console.log('name change') // 1s 后 name change
            },
            deep: true, // 深度监听对象,对象属性为对象时,设置 true 可以检测内部深层对象属性的修改
        }
    }

immediate 属性:立即执行属性,数据监听初始立即执行 watch 的处理函数,属性修改会再次执行

watch: {
        name: {
            handler() {
                console.log('name change') // 执行后 name change,1s 后再次 name change
            },
            immediate: true, // 初始化后立即调用 handler
        }
    }

注意:watch 可以监听 data 数据是否发生修改,做相应的操作,同样也可以监听路由发生修改,执行相应的操作。

watch: {
   $route(to, from) {
       // to 跳转至页面,from 来源页面
   }
}

文章来源:https://blog.csdn.net/u012396955/article/details/135088866
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。