Vue2和Vue3基础（一）

基础vue2的写法

<template>
  <div class="home">
    <h3>count:{{count}}</h3>
    <h3>double:{{double}}</h3>
    <h3><button @click="add">增加</button></h3>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      count:0,
    }
  },
  computed:{
    double(){
      return this.count*this.count;
    },
  },
  methods:{
    add(){
      this.count++;
    }
  },
  components: {
  }
}
</script>

组合api用setup写法

<template>
  <div class="about">
    <h3>count:{{data.count}}</h3>
    <h3>double:{{data.double}}</h3>
    <h3><button @click="add">增加</button></h3>
  </div>
</template>

<script>
 import {reactive,computed} from 'vue';

 export default {
   setup(){
     const data = reactive({
       count:0,
       double:computed(()=>{return data.count*2}),
     });
     function add(){
       data.count++;
     }
     return {data,add};
   },
 }
</script>

setup语法糖写法

<template>
  <div class="setup">
    <h3>count:{{count}}</h3>
    <h3>double:{{double}}</h3>
    <h3><button @click="add">增加</button></h3>
  </div>
</template>

<script setup>
    import {ref} from "vue";
    const count = ref(0);
    const double = ref(0);
    const add = () => {
      count.value++;
      double.value = count.value *2;
    }
</script>

<style scoped>

</style>

在 Vue 3 的<script setup>语法糖中，我们不能直接修改数据，而是需要将其包装在一个ref中进行赋值和修改。这是因为 Vue 3 采用了 Proxy 来实现数据响应式，而 Proxy 无法拦截对普通对象属性的直接访问，仅能拦截对对象的属性操作，例如添加、删除、修改等。因此，如果要实现对普通对象属性的响应式，就需要使用ref函数将其转换为一个响应式的对象引用，从而使其成为可以响应式更新的数据。

而且ref用来声明一个响应式数据，会返回一个指向该数据的引用，所以它和 Vue 2 的data属性类似。ref它可以让一个原始类型的值（如数字、字符串、布尔等）具有响应式特性，而reactive则是将一个普通的 JavaScript 对象变成响应式对象。另外，尽管reactive函数可以做到监听对象的每个属性，但有时我们不想让所有属性都被监听，这时就可以使用ref来声明一个单独的、可监听的值。ref函数声明了计数器变量count，并将初始值设为0。为了访问ref的值，需要通过value属性来获取。总之，使用ref声明响应式数据可以让代码更加具有可读性，从而便于开发。