VueJS 观察插入的参数

Posted 2023-02-21

【中文标题】VueJS 观察插入的参数

【英文标题】：VueJS observe plugged parameter

【发布时间】：2018-03-12 09:50:26

【问题描述】：

我从 VueJS 2 开始，我创建了一个简单的插件，可以将参数添加到 Vue 实例。

我有问题，因为当我更新此值时，我的计算属性仍然相同。

我的示例插件代码：

export default function (Vue) 
    Vue.MyProperty = "test"

    Object.defineProperties(Vue.prototype, 
        "$myProperty": 
            "get": function () 
                return Vue.MyProperty
            ,

            "set": function (value) 
                Vue.MyProperty = value

                return this
            
        
    )

还有我的组件代码

export default 
    "computed": 
        "test": function () 
            return this.$myProperty
        
    

当我在其他组件中更改this.$myProperty 时，我的组件返回无效值（例如，当我从"test" 更改为"newvalue" 时，我可以看到"newvalue"）但计算属性test 仍然是旧值（@ 987654328@ 在我的示例中）。

我尝试使用this.$set(this, "$myProperty", value)，但这仍然不起作用。

如何使用或声明此属性以在计算或监视属性中使用它？

【参考方案1】：

数据值没有在计算中自动更新的原因是因为您添加到 Vue 的属性 MyProperty 不是 观察到的 属性。从根本上说，Vue 的反应性是有效的，因为添加到 data 的所有值都被转换为 observed 属性；在幕后，它们被转换为带有一些附加代码的 getter/setter 对，因此当这些属性之一更改时，Vue 知道将更改传播到依赖于它的值的所有事物。

然而，问题中的代码只是向 Vue 对象添加了一个普通属性。你可以改变它，但它不是被动的。

也就是说，让它反应起来相对容易。我在我的回答here 中介绍了如何在 cmets 中执行此操作。基本上，不用将你的属性添加到 Vue，只需创建一个新的 Vue 对象（开销非常低），然后让你想要响应的属性成为该 Vue 的属性。这是一个工作示例。

console.clear()

function MyPlugin(Vue) 
  let store = new Vue(data:MyProperty: "some value")

    Object.defineProperties(Vue.prototype, 
        "$myProperty": 
            "get": function () 
                return store.MyProperty
            ,

            "set": function (value) 
                store.MyProperty = value

                return this
            
        
    )


Vue.use(MyPlugin)

const MyComponent = 
  template:`<div>test</div>`,
    "computed": 
        "test": function () 
            return this.$myProperty
        
    


new Vue(
  el: "#app",
  components:
    MyComponent
  
)

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <my-component></my-component>
  <button @click="$myProperty = 'new value'">Change</button>
</div>

【讨论】：

我能说什么——使用第二个 Vue 实例非常聪明:) 我找到了不同的解决方案，但你的也很聪明