476
社区成员
发帖
与我相关
我的任务
分享Vue 监听其他js文件变量的变化？
改变样式，通过msg布尔值
1.can.js
var obj = {},initValue = true;
Object.defineProperty(obj,“newKey”,{
get:function (){
return initValue;
},
set:function (value){
initValue = value;
}
});
点击改变布尔值为false
document.getElementById('btncc').onclick = function () {
initValue = false;
console.log(123);
}
通过延时器我已经知道，已被改变
setTimeout(()=>{
console.log( obj.newKey )
},3000)
抛出我所需要的函数和对象，然后将obj.newKey赋予msg，然后通过watch监听，看是否有变化，但是这里的监听好像没起作用
export default {
con,obj
}
2.vue
import Canvas from '…/…/Api/js’
export default {
name: ‘HelloWorld’,
data () {
return {
msg: Canvas.obj.newKey
}
},
mounted () {
Canvas.con()
},
watch: {
‘obj.newKey’ (val) {
console.log(val);
}
}
}
我就是想通过can.js改变的布尔值传递给vue页面，只要改变vue页面就能接到，现在好像是can.js改变了，vue页面不知道，请问这种情况怎么办？
...全文
请发表友善的回复…
发表回复
weixin_38081265 2018-02-13
- 打赏
- 举报
非常感谢，谢谢您！！！！！！
weixin_38118455 2018-02-13
- 打赏
- 举报
watch 是用来监听当前实例属性的改变 ‘obj.newKey’根本就不在vm中，能监听到才是怪事。
当然就算你监听本实例的msg也不会有效果，因为我们都知道Boolean在js中是传值不是传址的，也就是你
data() {
return {
msg: Canvas.obj.newKey
}
}
这段代码获取了newKey之后跟can.js就无关了。
你想监听其他js对象变量，只要把对象绑定到vm上就行，给你个简单例子，就不分页了，道理都一样
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<button onclick="change()">测试</button>
<div id="app"></div>
<script>
const obj = {
newKey: false
};
function change() {
obj.newKey = !obj.newKey
}
new Vue({
el: '#app',
data: {
msg: obj.newKey,
obj: obj
},
watch: {
msg(val) {
console.log(val) //监听不到
},
'obj.newKey'(val) {
console.log(val) //可以监听
}
}
})
</script>
