快捷導(dǎo)航

在JS中如何同步修改vue中的變量

更新時(shí)間：2023年07月06日 09:12:52 作者：0斌果0

這篇文章主要介紹了在JS中如何同步修改vue中的變量問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

JS中同步修改vue中的變量

問(wèn)題

在處理一個(gè)功能上遇到一個(gè)問(wèn)題：在vue組件中，引入了一個(gè)JS文件，在JS文件動(dòng)態(tài)創(chuàng)建了一些DOM節(jié)點(diǎn)，需要偵測(cè)dom節(jié)點(diǎn)中內(nèi)容的變化同時(shí)改變vue中組件的內(nèi)容。

思考

因?yàn)樗菃为?dú)的一個(gè)JS文件，里面動(dòng)態(tài)生成的dom可以通過(guò)oninput來(lái)偵測(cè)輸入內(nèi)容的變化，但要實(shí)時(shí)更新到vue組件中，那只能找他們的連接點(diǎn)或者搭橋(借助vuex、localStorage這些全局變量)，想著可以利用對(duì)象類型，因?yàn)槠涫菍⒁梅旁诙阎校嬲闹荡娣旁跅Ｖ?，通過(guò)傳遞其引用作為橋梁來(lái)達(dá)到JS文件中修改vue中值的效果。

解決

通過(guò)上述方式并不利于今后維護(hù)，其實(shí)我們可以巧妙利用閉包達(dá)到目的，這組件中定義需要修改的方法，通過(guò)在JS調(diào)用該該方法來(lái)達(dá)到修改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修改賦值變量問(wèn)題

最近使用vue.js發(fā)現(xiàn)修改賦值的變量，原變量的數(shù)據(jù)也隨之改變了。

例子

const app = new Vue({
?? ??? ??? ?el: '#app',
?? ??? ??? ?data: {
?? ??? ??? ??? ?list:[1,2,3],
?? ??? ??? ?},
?? ??? ??? ?methods: {
?? ??? ??? ??? ?test() {
?? ??? ??? ??? ??? ?let temp = this.list; // 將list賦值給了temp
?? ??? ??? ??? ??? ?temp = [1,2], // temp發(fā)生改變
?? ??? ??? ??? ??? ?console.log(temp); // 打印結(jié)果 [1,2]
?? ??? ??? ??? ??? ?console.log(this.list); // 打印結(jié)果 [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發(fā)生改變
?? ??? ??? ??? ??? ?console.log(temp); // 打印結(jié)果 [1,2]
?? ??? ??? ??? ??? ?console.log(this.list); // 打印結(jié)果 [1,2,3]
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?});

原因：

在vue中，數(shù)組和對(duì)象傳遞都是引用傳遞。賦值時(shí)傳遞的并不是值，而是指向了同一個(gè)空間。