vue3 操作修改数据

vue2.x改变数据：

<template>

  <div class="v2">

    这是数据展示：

    <div v-for="item in nm" :key="item">name: {{item.name}}, type: {{item.type}}</div>

    <div @click="chfn">点击改变数据</div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      nm: [{name: 'a1',type: 1},{name: 'a2',type: 2},{name: 'a3',type: 3},]

    }

  },

  methods: {

    chfn() {

      this.nm = [{name: 'a111',type: 10},{name: 'a222',type: 20},{name: 'a333',type: 30},]

    }

  }

}

</script>

<style>

</style>

vue2.x 没有点击改变数据方法的时候：

这是vue2.x 点击了改变方法后改变了数据

 

接下来我们看看 vue3.x 的初始化数据和改变数据：

<template>

  <div>展示ref初始化的数据：{{ num }}</div>

  <div @click="add" style="margin-bottom: 20px;background: #ccc;">点击改变ref赋值数据(每点击一次加上10)</div>

  <div v-for="item in a2.nm" :key="item">展示reactive初始化的数据：{{item.type}}</div>

  <div @click="aam" style="background: #ccc;" >点击改变reactive赋值数据(我这里测试时是点击后随意改变的)</div>

</template>

<script>

import { reactive, ref } from "vue";

export default {

  name: "Button",

  setup() {

    const num = ref(2); // ref 初始化单一型数据

    function add() { // 改变num的方法

      num.value += 10;

    }

    const a2 = reactive({nm: [{name: 'a1',type: 1},{name: 'a2',type: 2},{name: 'a3',type: 3},]})  // reactive 初始化复杂型数据

    function aam(item) { // 改变a2的方法

      console.log('aam', item)

      a2.nm = [{name: 'a11',type: 11},{name: 'a22',type: 22},{name: 'a33',type: 33},]

    }

    return {

      num,

      add, // 改变num的方法

      a2,

      aam   // 改变a2的方法

    }

  },

};

</script>

看起来要稍微的麻烦一点。它把定义和改变数据都放到了setup里面。还区分了定义数据的不同关键字(ref，reactive)

vue3.x 没有点击改变数据方法的时候：

这是 vue3.x 点击了改变方法后改变了数据

可以看到 vue3 的修改数据已经成功。

 

总结：vue2 和vue3对数据的初始化赋值还是有很大区别。在改变数据时也是有不小的区别。但是也不难。