笨蛋都知道的vue3.0(setUp)-一一网

Vue3介绍

vue3中文文档
Vue.js3.0正式版在2020年9月份发布, 支持Vue2的大多数特性, 更好的支持Typescript, 虚拟Dom完全重构, 结合模板编译提高运行性能, 减少运行时开销, 使用Proxy(代理)代替defineProperty实现数据的响应式, 新增特性Composition(组合)Api。

创建项目

更新vue-cli脚手架至最新的版本

   yarn global add @vue/cli
    # or
   npm install -g @vue/cli
复制代码

创建项目过程

   vue create vue3 //项目名称
复制代码

Compositon API

setup 函数是入口函数，在这个函数里我们可以定义变量、函数、生命周期等等，然后进行导出，就可以在页面上进行访问了。具体使用步骤如下：

<template>
  <div class="home">{{ num }}</div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";   // 导入Vue3中的核心方法
export default {
  name: "Home",
  data() {
    return {};
  },
  setup() {
    const num = ref(1);  // 定义一个响应式的常量
    const arr = reactive([]);
    onMounted(() => {
      console.log(num.value);  //输出num的值
    });
    return {  //导出定义的变量和方法，在模板中使用
      num,
      arr,
    };
  },
};
</script>
复制代码

setup它将接受两个参数props,context

props:表示父组件传递过来的属性，且值为响应式的，若修改其值页面将被更新。故props 不能进行解构，但可以使用 toRefs 进行解构，否则它将失去响应式。
context 上下文，里面包含 attrs 、slots、emit等。它不是响应式的，故可以进行解构

ref
接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property

    const num = ref(111);  //可以定义数字
    const flag = ref(false);  //可以定义boolean
    const name = ref("vue");  //可以定义string
复制代码

reactive 一般给引用类型的值设置为响应式的值

    const arr = reactive([1, 2, 3, 4]);
    const object = reactive({ a: 11, b: 22 });
复制代码

toRefs：将响应式对象转换成普通对象

    setup() {
        const data = reactive({
            name: 'vue3',
            age: 11
        })
        
        return {
            ...toRefs(data)
        }
    }
复制代码