亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Vue 插件中觀察對象屬性

如何在 Vue 插件中觀察對象屬性

慕斯709654 2021-11-12 10:42:34
背景考慮以下非?;镜牟寮篿mport SomeObject from "./SomeObject";/** * Some Cool Plugin... */export default {    install(Vue){        Vue.prototype.$someObject = Vue.observable(SomeObject);    }}上面的目的是在我的應用程序中注冊一個反應性的對象。問題與疑問Vue.prototype.$someObject包含某些需要watched在全局級別而不是組件級別上的屬性。有沒有辦法在installVue 插件的方法中將觀察者附加到 Vue 實例?請注意,我不是在尋找以下答案,我已經知道這是可以做到的,但它違背了將代碼分成插件的意義。全局混合也不夠......watch: {    '$someObject.foo': {        handler(value) {            console.log(value);        }    }}我試過的根據此處概述的文檔,我假設我可以按照以下方式做一些事情:export default {    install(Vue){        Vue.prototype.$someObject = Vue.observable(SomeObject);        // I have tried all of the following:        Vue.watch(Vue.prototype.$someObject.foo, value => { console.log(value) });        Vue.$watch(Vue.prototype.$someObject.foo, value => { console.log(value) });        Vue.prototype.watch(Vue.prototype.$someObject.foo, value => { console.log(value) });        Vue.prototype.$watch(Vue.prototype.$someObject.foo, value => { console.log(value) });        Vue.watch(Vue.$someObject.foo, value => { console.log(value) });        Vue.$watch(Vue.$someObject.foo, value => { console.log(value) });        Vue.prototype.watch(Vue.$someObject.foo, value => { console.log(value) });        Vue.prototype.$watch(Vue.$someObject.foo, value => { console.log(value) });    }}
查看完整描述

1 回答

?
慕容708150

TA貢獻1831條經驗 獲得超4個贊

在 Vue 2 中,只有 Vue 實例暴露watch. 當 Vue 3 到來時,您將有其他選擇,但現在您只能使用 Vue 實例。


也就是說,你可以在插件中有一個實例,所以它應該很容易實現你想要的:


import Vue from 'vue';

import SomeObject from './SomeObject';


/**

 * Some Cool Plugin...

 */

export default {

    install (Vue) {

        Vue.prototype.$someObject = Vue.observable(SomeObject);


        new Vue({

          watch: {

            '$someObject.foo' () {

              // Do something

            }

          }

        })

    }

}

此處創建的 Vue 實例沒有被渲染。它的存在純粹是為了給我們一種觀看方式$someObject。


我知道你在問題中排除了這一點,但我真的不明白為什么。也許您沒有打算創建一個專門用于觀看的專用 Vue 實例?


另一種方法是使用屬性設置器而不是watch. 這個想法是用來Object.defineProperty為你想要“觀察”的屬性創建一個 setter,然后把你需要的任何副作用放在 setter 中。


查看完整回答
反對 回復 2021-11-12
  • 1 回答
  • 0 關注
  • 177 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號