vue3笔记（张天禹老师）

性能的提升

1. 打包大小减少41%
2. 初次渲染快55%，更新渲染快133%
3. 内存减少54%

源码的升级

1. 使用Proxy代替definePropety实现响应式
2. 重写虚拟DOM的实现和Tree-Shaking

拥抱TypeScript

1. vue3可以更好的支持TypeScript

新的特性

1．Commposition API（组合API）

• setup配置
• ref与reactive
• watch与watchEffect
• provlde与inject

2.新的内置组件

• Fragment
• Teleport
• Suspense

3.其他改变

其他改变

• 新的生命周期钩子
• data 选项应始终被声明为一个函数
• 移除keyCode支持作为 v-on 的修饰符

二、创建Vue3工程

1.使用 vue-cli 创建

官方文档：创建一个项目 | Vue CLI

查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

vue --version

安装或者升级你的@vue/cli

npm install -g @vue/cli

创建

vue create vue_test

启动

cd vue_test

npm run serve

2.使用 vite 创建

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网：https://vitejs.cn

- 什么是vite？—— 新一代前端构建工具。

- 优势如下：

  - 开发环境中，无需打包操作，可快速的冷启动。

  - 轻量快速的热重载（HMR）。

  - 真正的按需编译，不再等待整个应用编译完成。

- 传统构建 与 vite构建对比图

创建工程

npm init vite-app <project-name>

进入工程目录

cd <project-name>

安装依赖

npm install

运行

npm run dev

3．vue3工程结构

入口文件分析

//引入不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
//注意在这里无法像vue2那样去书写了，(这里并不兼容)
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象---app类似于vue2中vm,但app比vm更轻
const app = createApp(App);
// console.log(app);
//挂载
app.mount('#app');
// 简写
// createApp(App).mount('#app')
//两秒后卸载
// setTimeout(() => {
//     app.unmount("#app");
// },2000)

// //vue2写法
// const vm = new Vue({
//     render: h=> h(App)
// });
// vm.$mount('#app')
vue3的组件模版结构可以没有根标签

vue3的组件模版结构可以没有根标签

三、常用Composition API（组合式API）

1.拉开序幕的setup

1. 理解：Vue3.0中一个新的配置项，值为一个函数。

2. setup是所有Composition API （组合式API）“表演的舞台”。

3.组件中所用到的：数据、方法等等，均要配置在setup中。

4.setup函数的两种返回值：

   1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）

   2.若返回一个渲染函数：则可以自定义渲染内容。（了解）

5. 注意点：

   1. 尽量不要与Vue2.x配置混用

      - Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。

      -但在setup中不能访问到Vue2.x配置（data、methos、computed...）。

      -如果有重名, setup优先。

   2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

<template>
  <h1>一个人的信息</h1>
  <h2>姓名:{
  { name }}</h2>
  <h2>年龄:{
  { age }}</h2>
  <button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
  <br />
  <h2>性别:{
  { sex }}</h2>
  <h2>a:{
  {a}}</h2>
  <button @click="sayWelcome">说话(Vue3所配置的——sayWelcome)</button>
  <br />
   <br />
  <button @click="test1">测试在vue2的配置中去读取vue3中的数据，方法</button>
  <br />
  <button @click="test2">测试在vue3的配置中去读取vue2中的数据，方法</button>
</template>

<script>
import { h } from "vue";
export default {
  name: "App",
  data() {
    return {
      sex: "男",
      // vue2: 'still can use vue2 in vue3 code',
      a:1
    };
  },
  methods: {
    //vue2配置方法的方式
    sayWelcome() {
      alert("然锅锅学vue3");
    },
    test1() {
      console.log(this.sex);
      console.log(this.name);
      console.log(this.age);
      console.log(this.sayHello);
      // this.sayHello();
    },
  },
  setup() {
    //数据
    let name = "张三";
    let age = 18;
    let a=200

    //方法
    function sayHello() {
      alert(`我叫${name},我${age}岁了，你好啊`);
    }
    function test2() {
      console.log(this.name);
      console.log(this.age);
      console.log(this.sayHello);
      console.log(this.sex);
      console.log(this.sayWelcome);
    }
    //返回一个对象（常用）
    return {
      name,
      age,
      sayHello,
      test2,
      a
    };
    //返回一个函数（渲染函数）
    // return ()=>{ return h('h1','然锅锅')}
  },
};
</script>

2.ref函数

作用: 定义一个响应式的数据

语法: const xxx = ref(initValue)

• 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
• JS中操作数据：xxx.value
• 模板中读取数据: 不需要.value，直接：<div>{ {xxx}}</div>

备注：

• • 接收的数据可以是：基本类型、也可以是对象类型。
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
  • 对象类型的数据：内部“求助”了Vue3.0中的一个新函数——reactive函数。

 <template>
  <h1>一个人的信息</h1>
  <h2>姓名:{
  { name }}</h2>
  <h2>年龄:{
  { age }}</h2>
  <h3>工作各类：{
  { job.type }}</h3>
  <h3>工作薪水：{
  { job.salary }}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    //数据
    let name = ref("张三");
    let age = ref(18);
    let job = ref({
      type: "前端工程师",
      salary: '3k',
    });

    //方法
    function changeInfo() {
      name.value = "李四";
      age.value = "48";
      // job.value = {
      //   type: "后端工程师",
      //   salary: '6k',
      // };
      job.value.type = "后端工程师";
      job.value.salary='6k'
      console.log(job.value);
    }
    //返回一个对象
    return {
      name,
      age,
      job,
      changeInfo,
    };
  },
};
</script>

3.reactive函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用