在JS中如何同步修改vue中的变量
作者：0斌果0
这篇文章主要介绍了在JS中如何同步修改vue中的变量问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
JS中同步修改vue中的变量
问题
在处理一个功能上遇到一个问题：在vue组件中，引入了一个JS文件，在JS文件动态创建了一些DOM节点，需要侦测dom节点中内容的变化同时改变vue中组件的内容。
思考
因为它是单独的一个JS文件，里面动态生成的dom可以通过oninput来侦测输入内容的变化，但要实时更新到vue组件中，那只能找他们的连接点或者搭桥(借助vuex、localStorage这些全局变量)，想着可以利用对象类型，因为其是将引用放在堆中，真正的值存放在栈中，通过传递其引用作为桥梁来达到JS文件中修改vue中值的效果。
解决
通过上述方式并不利于今后维护，其实我们可以巧妙利用闭包达到目的，这组件中定义需要修改的方法，通过在JS调用该该方法来达到修改vue组件变量的目的。
vue中如下：
<template>
<div class="about" id="about">
{{text}}
</div>
</template>
<script>
import Test from './test'
export default {
name: 'About',
data () {
return {
text: 'gg'
}
},
mounted () {
const test = new Test(
{
hooks: {
input: value => this.text = value
}
}
)
}
}
</script>类中方法
export default class Test {
constructor(props = {}) {
this.options = Object.assign({
mode: 'write'
}, props)
this.create()
}
create() {
let about = document.getElementById('about')
let div = document.createElement('div')
div.innerHTML = '<input type="text" id="inputText">'
about.appendChild(div)
let input = document.getElementById('inputText')
input.addEventListener('input', () => {
this.options.hooks.input(input.value)
})
}
}vue.js修改赋值变量问题
最近使用vue.js发现修改赋值的变量，原变量的数据也随之改变了。
例子
const app = new Vue({
el: '#app',
data: {
list:[1,2,3],
},
methods: {
test() {
let temp = this.list; // 将list赋值给了temp
temp = [1,2], // temp发生改变
console.log(temp); // 打印结果 [1,2]
console.log(this.list); // 打印结果 [1,2]
}
}
});解决方案
const app = new Vue({
el: '#app',
data: {
list:[1,2,3],
},
methods: {
test() {
let temp = JSON.parse(JSON.stringify(this.list)); // 将list赋值给了temp
temp = [1,2], // temp发生改变
console.log(temp); // 打印结果 [1,2]
console.log(this.list); // 打印结果 [1,2,3]
}
}
});原因：
在vue中，数组和对象传递都是引用传递。赋值时传递的并不是值，而是指向了同一个空间。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。