快速上手Vue3

Vue默认版本都3.0，在不学就Out了。对于有Vue基础的同学来说，掌握几个关键点，上手Vue3分分钟的事。我们一起来看看吧！

需要掌握的几点：

1.Vue2 options Api 和 Vue3 Composition API的区别

2.setup函数

3.ref、reactive响应式引用

4.toRefs将对象包装，解构的值也是响应式

5.生命周期函数

一、Vue2 options Api VS Vue3 Composition API

image.png

从上图可知Vue2的处理逻辑是分散的，Vue3的处理逻辑在一起，维护也更方便

1.setup函数

• Vue3所有代码的编写都是在setup()里，它是实例被完全初始化之前自动调用，相当于created。setup接收2个参数props和context(attr,slots,emit)，会return出一些内容，这些内容可以直接在template里直接使用

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
    <h1>{{ getName() }}</h1>
  </div>
</template>

<script>
export default {
  name: "Vue3",

  setup() {
    const name = "vue3";
    const getName = () => {
      return name + "getName";
    };
    return { name, getName };
  },
};
</script>
  

2.ref、reactive响应式引用

• vue3里定义的变量不是响应式的，数据改变，页面不会改变，需要ref、reactive进行转换
• ref、reactive原理是通过Proxy，对数据进行封装，当数据变化时，触发模板内容的更新
• ref处理基本类型的数据，reactive 处理引用类型的数据

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
     <h1>{{ obj.age }}</h1>
  </div>
</template>

<script>
import { ref, reactive} from 'vue'
export default {
  name: "Vue3",

  setup() {
    // 将vue3变成proxy({value:'vue3'})，响应式应用,改变时name.value = 'change names'
    let name = ref('vue3')  
    setTimeout(()=>{
      name.value = 'change name'
    },1000)

    //  // 将{age:20}变成proxy({age:'20'})，响应式应用,改变时obj.age = 'change age'
    let obj = reactive({age:20})
     setTimeout(()=>{
      obj.age = 'change age'
    },1000)
    return { name,obj }
  },
};
</script>

3.toRefs将对象包装，解构的值也是响应式

• reactive 处理引用类型的数据变为响应式，解构出来的数据不是响应式，需要toRefs进行转换

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
     <h1>{{ age }}</h1>
  </div>
</template>

<script>
import { reactive,toRefs} from 'vue'
export default {
  name: "Vue3",

  setup() {
   


    let obj = reactive({age:20,name:'vue3'})
    const { age } = obj  // 解构出的age 不是响应式

    // toRefs 将proxy({age:20,name:'vue3}) 转换成{age:proxy({value:'20'}),name:proxy({value:'vue3'})}
    const { name } = toRefs(obj)
    return { age,name }
  
    
  },
};
</script>

4.生命周期函数

• 和vue2相比少了create,多了onRenderTracked(每次渲染后收集响应式依赖)、onRenderTriggered(每次渲染重新触发的时候)

<template>
  <div class="hello"></div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default {
  name: "Vue3",

  setup() {
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
    });

    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    }),
      onUpdated(() => {
        console.log(" onUpdated");
      }),
      onBeforeUnmount(() => {
        console.log(" onBeforeUnmount");
      }),
      onUnmounted(() => {
        console.log("onUnmounted");
      });
  },
};
</script>

以上就是vue3的简单介绍，其他和vue2大致都相同，大家一起加油！