vue里的watcher什么时候建立

fiy 其他 11

回复

共3条回复 我来回复
  • 不及物动词的头像
    不及物动词
    这个人很懒,什么都没有留下~
    评论

    Vue的Watcher在哪里建立取决于被观察对象的类型以及Vue的更新策略。

    对于Vue的响应式数据(即使用data选项定义的数据),Watcher会在Vue实例被创建时立即被建立。当数据发生变化时,Watcher会被通知并执行相应的更新操作。

    对于计算属性(即使用computed选项定义的属性),Watcher会在依赖的响应式数据发生变化时才会建立。这意味着计算属性只有在被访问时才会计算,并且会缓存结果,只有在依赖的数据发生变化时才会重新计算。

    对于侦听器(即使用watch选项定义的观察函数),Watcher会在被观察的数据发生变化时建立。侦听器可以用来监听某个特定数据的变化,并在变化发生时执行相应的操作,比如发送Ajax请求或执行其他逻辑。

    在Vue的更新策略方面,Vue使用异步更新策略来提高性能。这意味着当数据变化时,Vue不会立即执行更新操作,而是将变化放入一个队列中,然后在下一个事件循环开始前进行更新。这样可以避免频繁的更新操作,提高性能。Watcher的建立和执行也受到这个更新策略的影响。

    总结来说,Watcher在Vue中的建立取决于被观察对象的类型和数据的变化时机。只有当数据发生变化时,对应的Watcher才会被建立,并执行相应的更新操作。

    2年前 0条评论
  • fiy的头像
    fiy
    Worktile&PingCode市场小伙伴
    评论

    在Vue中,Watcher是用于监听数据变化并执行相应操作的实例。Watcher的建立是在Vue实例挂载之后,以及首次渲染完成之后进行的。

    具体来说,Vue组件在实例化过程中会进行以下步骤:

    1. 实例化Vue组件对象:在这一步骤中,Vue会将组件的配置项进行合并,并进行一些初始化操作。
    2. 初始化数据:在实例化过程中,Vue会对组件的data选项进行响应式转换,即将普通的JavaScript对象转换成具有数据劫持功能的响应式对象。这是通过Vue内部的Observer类实现的,它会遍历组件的data选项中的每个属性,并将其转换成getter和setter方法。
    3. 编译模板:Vue会将组件的模板编译成render函数,这个render函数可以将组件的数据渲染成虚拟DOM。
    4. 挂载实例:在这一步骤中,Vue会将组件的虚拟DOM挂载到真实的DOM上。挂载过程包括创建真实的DOM元素、将虚拟DOM渲染成真实的DOM,并将真实的DOM插入到文档中的指定位置。
    5. 首次渲染:在挂载完成后,Vue会触发组件的初次渲染。在这个过程中,Vue会调用刚才编译得到的render函数,将组件的数据渲染成虚拟DOM,并将虚拟DOM通过diff算法与之前的虚拟DOM进行比较,最终将变化的部分更新到真实的DOM上。
    6. 创建Watcher:在初次渲染完成后,Vue会根据模板中定义的依赖关系,创建相应的Watcher对象。Watcher会监听组件实例中响应式数据的变化,并在数据变化时执行相应的回调函数。这个过程是通过Vue内部的Dep类和Watcher类实现的。Dep类用于收集依赖,而Watcher类用于进行依赖的添加、移除和更新。

    需要注意的是,Vue中的Watcher是一种惰性求值的机制,即只有当数据真正被需要时才会进行求值和建立Watcher。因此,在组件初次渲染过程中,只有在模板中使用了该数据的部分才会建立相应的Watcher。而之后的数据变化,只有影响到已建立Watcher的部分才会触发相应的回调函数。这样可以避免不必要的计算和更新,提高性能。

    2年前 0条评论
  • worktile的头像
    worktile
    Worktile官方账号
    评论

    在Vue中,Watcher是用于追踪响应式数据变化的对象。它会在数据变化时执行相应的回调函数。Watcher会在以下几个时机被创建:

    1. 在Vue实例实例化时创建Watcher。当一个Vue实例被创建时,它会对数据对象中的每个属性进行递归遍历,为每个属性创建一个独立的Watcher对象。这些Watcher对象会在数据变化时被触发。

    2. 在模板编译阶段创建Watcher。当Vue编译模板时,会解析模板中的指令和插值表达式,并为每个指令和插值表达式创建一个Watcher对象。这些Watcher对象会在对应的数据变化时被触发。

    3. 在计算属性中创建Watcher。计算属性是一种根据其他属性计算得到的属性,它的值会根据依赖的属性动态计算。当计算属性的依赖属性发生变化时,计算属性会重新计算,并触发与之关联的Watcher对象。

    4. 在侦听属性中创建Watcher。侦听属性允许我们监听并响应一个特定的数据变化。当侦听属性所监听的数据变化时,对应的Watcher对象会被创建并触发。

    需要注意的是,Vue中的Watcher是惰性求值的,也就是说它在创建时并不会立即执行回调函数。Watcher只有在数据变化时才会执行回调函数,然后通知相关的组件进行更新。这样可以避免不必要的计算和渲染。另外,Watcher会根据依赖的数据变化的顺序进行排序,以确保计算的顺序正确。

    2年前 0条评论
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部