vue3学习总结1

一.vue3与vue2相比带来哪些变化？

a.性能的提升（包括打包大小减少，初次渲染的速度加快，更新渲染速度加快，内存减少）

b.源码的升级（响应式的原理发生了变化，由原来的defineProperty变成了Proxy;重写虚拟DOM的实现和Tree-Shaking ）

拓展：Tree-Shaking:用于描述移除js上下文中未引用的代码行为的术语。webpack支持Tree-Shaking。

c.拥抱TypeScript（vue3可以更好的支持TypeScript）

d.新特性：

• Composltion API(组合API)

2. ref与reactive

3. watch与watchEffect

4. provide与inject

• 新的内置组件

5. Fragment

6. Teleport

7. Suspense

• 其他改变

8. 新的生命周期钩子

9. data选项应始终被声明为一个函数

10. 移除keyCode支持作为v-on的修饰符

二.vue3中的setup

首先：setup是vue3的一个新的配置项，值为一个函数。它的作用相当于是代替了vue2中的data,computed,method等等。其次它的返回值有两种除了返回一个对象外还可以返回一个渲染函数。

不过需要注意的一点是：setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。

三.setup中的两个注意点：

• setup的执行时机

• 在beforeCreate之前执行一次，this是undefined

• setup的参数

• props：值为对象，包含:组件外部传递过来，且组件内部声明接受了属性。

• context:上下文对象

• attrs:值为对象，包含：组件外部传递过来但没有在props配置中声明的属性，相当于this.$attrs

• slots:收到的插槽内容，相当于this.$slots

• emit:触发自定义事件函数，相当于this.$emit

例子如下：

子组件Demo.vue:

<template>
  <div style="text-center: left">
    <h1>个人信息</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>传递信息:{{ msg }}</h2>
    <button @click='test'>测试触发一下Demo组件的hello事件</button>
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "Demo",
  props:['msg','school'],
  emits:['hello'],
  // beforeCreate() {
  //   console.log("--------beforeCreate--------");
  // },
  setup( props,context) {
    console.log("-------setup--------");//setup早于beforeCreate执行
    console.log('-------setup------',props);
    console.log('-------setup------',context);
    console.log('-------setup------',context.attrs);//相当于vue2中的$attrs
    console.log('-------setup------',context.emit);//触发自定义事件
    console.log('-------setup------',context.slots);//插槽
    let person = reactive({
      name: "张三",
      age: 18,
    });
    //方法
    function test() {
      context.emit('hello',666)
    }
    //返回一个对象
    return {
      person,
      test
    };
  },
};
</script>

父组件App.vue

<template>
  <Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
    <template v-slot:qwe><span>操作与系统</span></template>
    <template v-slot:asd><span>马原</span></template>
  </Demo>
</template>
<script>
import Demo from "./components/Demo.vue";
export default {
  name: "App",
  components: {
    Demo,
  },
  setup() {
    function showHelloMsg(value) {
      alert(`你好啊，你触发了hello事件，我收到的参数时${value}!`);
    }
    return{
    showHelloMsg
    }
  },
};
</script>