从入门到精通：Vue3一篇文章搞定！_vue.js

🌈个人主页：前端青山 🔥系列专栏：vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:从入门到精通：Vue3一篇文章搞定！

目录

vue3语法

1、vue3初识

1、vue3简介

2、vue3特点：

3、创建vue3 工程项目

4、vue3目录结构分析

2、Composition API

1、setup函数

2、setup执行时间

3、ref 响应式函数

1、引言：

2、ref 函数

4、reactive 函数

5、vue3响应式原理

1、vue2.x的响应式原理

2、vue3响应式原理

6、Reactive 与 ref 对比

7、vue3中的组件传参

1、父传子

2、子传父

8、vue3中的计算属性

9、vue3 中的 watch监听器

10、vue3生命周期

11、vue3中自定义hook函数

12、toRef 与 toRefs

13、vue3 中的路由

14、vue3 中的vuex

vue3语法

1、vue3初识

1、vue3简介

2020.9 vue.js 发布3版本。 耗时2年多开发完毕。由尤雨溪团队打造。

2、vue3特点：

1、性能提升

  • 打包大小减少41%
  • 初次渲染快51%，更新渲染快133%
  • 内存占用减少54%

2、源码升级

  • 使用Proxy 代替Object.defineProperty 实现双向数据绑定
  • 重写虚拟DOM的实现和Tree-Shaking
  • vue3 更好的支持typescript

3、新的特性

composition API(组合式api)

  • setup配置
  • ref和reactive
  • watch 和watchEffect
  • provide和inject提供了新的内置组件
  • Fragment
  • Teleport
  • Suspense

其他改变

  • 新的生命周期钩子
  • 移除keyCode 作为v-on的修饰符
3、创建vue3 工程项目
代码解读 
// 1. 确保你的vue-cli 脚手架版本在4.5.0以上，这样才能创建
// 2. 检查脚手架版本  vue -V 或 vue --version
// 3. 如果版本低话，重新安装vue-cli   npm install -g @vue/cli  
// 4. vue create vue3-project
// 5. cd vue3-project
// 6. npm run serve 启动项目
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

vite模板搭建vue3项目

代码解读 
npm init vue@latest
  • 1.

从入门到精通：Vue3一篇文章搞定！_vue.js_02

4、vue3目录结构分析
代码解读 
// vue3 入口文件 main.js
// 引入的不是Vue构造函数了，而是createApp 这个工厂函数(工厂函数就是返回值为一个对象的函数)
import { createApp } from 'vue'  
import App from './App.vue'  
const app = createApp(App).mount('#app') // app 相当于vue2中的vm，但是比vm轻，里面绑定的属性和方法更少，而不是像vm那样用的不用的都绑上，显的有点重


// vue2入口文件 main.js
import Vue from 'vue'
import App from './App.vue'
const vm = new Vue({
  render: h => h(App),
}).$mount('#app')

// 比较 
// vue3 引入的是createApp 这个函数，而不是vue2中的的 Vue 构造函数啦。
// vue3中的 app 类似于之前vue2中的vm, 但是app应用实例对象比vm 更轻，里面绑定的属性和方法更少
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 打开app.vue，发现vue3模板结构可以不使用根标签。
代码解读 
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
  • 1.
  • 2.
  • 3.
  • 4.

2、Composition API

Composition API 也叫组合式api 主要包括如下及部分：

1、setup函数
  • 它是vue3新增的一个配置项，值为一个函数,所有的组合式API 方法都写在在setup函数中。
  • 组件中用到的数据,方法 计算属性，事件方法，监听函数，都配置在setup 中。
  • setup的函数值为一个函数，该函数的返回值为一个对象，对象中的属性和方法均可以在模板中直接使用。代码如下：
代码解读 
<template>
  <div>
    <p>姓名:{
         { name }}</p>
    <p>年龄:{
         { age }}</p>
    <p @click="sayHello(10)">说话</p>
  </div>
</template>

<script>
export default {
  name: "App",
  setup() { //为一个函数
     //定义变量 
    let name = "张三";
    let age = 20;
     // 定义方法
    function sayHello(m) {
      alert(`${name}--${age}--${m}`);
    }
    return { //setup函数返回值为一个对象
      name,
      age,
      sayHello,
    };
  },
};
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 注意：setup 函数尽量不要和vue2.x混合使用
  • vue2.x中的(data,methods,computed)可以访问到 setup中的属性和方法
  • 在setup中不能访问vue2.x中的配置数据和方法如(data,methods,computed)
    代码如下：
代码解读 
<template>
  <div>
    <p>姓名:{
         { name }}</p>
    <p>年龄:{
         { age }}</p>
    <p @click="sayHello(10)">说话</p>
    <p>{
         { height }}</p>
  </div>
  <!-- vue2.x中的事件 -->
  <div @click="test1">vue2中的事件test1</div>
  <!-- vue3中的事件 -->
  <div @click="test2">vue3中的事件test2</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      sex: "男", // vue2中的变量
      height: 186, // vue2中的变量
    };
  },
  methods: {
    test1() {
      console.log(this.name); // "张三"
      console.log(this.age); // 20;
      console.log(this.sayHello); // 函数
      console.log(this.sex); // 男
    },
  },
  setup() {
    let name = "张三";
    let age = 20;
    let height = 176; // setup中的变量
    function sayHello(m) {
      alert(`${name}--${age}--${m}`);
    }
    function test2() {
      console.log(this.name); // "张三
      console.log(this.sayHello); // 函数
      console.log(this.sex); // undefined  vue3中的setup 访问不了vue2中数据
      console.log(this.test1);// undefined vue3中的setup 访问不了vue2中方法
    }
    return {
      name,
      age,
      sayHello,
      test2,
      height,// setup中的变量
    };
  },
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
2、setup执行时间

1、 setup 在beforeCreate之前执行，且setup中获取不到this this为undefined

代码解读 
beforeCreate() {
    console.log("beforeCreate");
    console.log(this); // proxy 实例对象
  },
  setup() {
    console.log("setup");
    console.log(this); // undefined
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

3、ref 响应式函数

1、引言：

如下代码：当点击执行changeFn函数，修改setup中定义的变量时，发现页面中的name和age的数据并没有修改，说明该数据不是响应式数据

代码解读 
<template>
  <div>111</div>
  <p>{
         { name }}--{
         { age }}</p>
  <button @click="changeFn">changeFn</button>
</template>

<script>
export default {
  name: "App",
  setup() {
    //定义变量
    let name = "张三";
    let age = 20;
    // 定义方法
    function changeFn() {
      name = "李四";
      age = 30;
    }
    return {
      //setup函数返回值为一个对象
      name,
      age,
      changeFn,
    };
  },
};
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
2、ref 函数
  • 它是 vue3中的一个函数，一般用于将基本类型数据处理成响应式数据。
  • 作用：定义一个基本类型的响应式的数据，只有数据成为响应式数据，这样当数据变化时，才能被监测到。
  • 使用时需要从vue中引入
代码解读 
<script>
   import { ref } from "vue"; // 引入响应式函数ref
   ...
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 语法：const xxx =ref(数据变量)；结果 返回一个 RefImpl 的引用对象，获取时为 xxx.value
  • 在页面模板中使用数据直接 使用插值表达式，不需要加value
    姓名:{ { name }} ，因为vue3会自动帮你.value,所以可以拿到值
  • ref 函数实现数据响应式的原理还是利用了vue2的Object.defineProperty() 给数据设置 get set 监听函数，如下图：

image-20211130230403826

  • 接收的数据类型可以是基本类型(**实现响应式原理为Object.defineProperty()**)，也可以是对象类型(当为对象时，实现响应式的原理就是Proxy不是Object.defineProperty())

点击如下change事件，修改name 和age

代码解读