vue3入门

参考教程：尚某谷、Vue3官网

一、简介

1.性能的提升

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

2.源码的升级

• 使用Proxy代替denfineProerty实现响应式
• 重写虚拟DOM的实现和Tree-Shaking

3.拥抱TypeScript

vue3可以更好的支持TypeScript

4.新的特性

1.Composition API（组合API）

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

​ …

2.新的内置组件

• Fragment
• Teleport
• Suspense

3.其他改变

新的生命周期钩子

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

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

…

接触感受：

面试会问源码的升级，新特性

vue3的template标签里可以不用套一个div

vue3中不推荐使用this变量

vue3中beforecreated和created被setup替换了，写在data和methods里的数据的方法都写在setup里

二、创建vue3项目

第一步：cmd查看vue/cli版本，只有版本再4.5.0以上才能创建vue3项目

vue -V

第二部：如果没有安装或升级

npm i -g @vue/cli

第三步：创建

vue create 项目名称

第四步：启动

npm run serve

小扩展：

webpack是现在主流的构建工具，vite是下一代构建工具（尤雨溪团队研发的），webpack是把所有的东西打包好啦就开放浏览入口，vite是直接先开放浏览入口后按需引入文件。所以vite的打包速度比webpack快

三、常用Compostion API

拉开序幕的setup

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

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

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

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

• 返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点关注）
• 若返回一个渲染函数：则可以自定义渲染内容（了解）

5.注意点：

• 尽量不要与vue2配置混用
  • vue2配置（data、methods、computed…）中可以访问到setup中的属性、方法。
  • 但在setup中不能访问到vue2配置（data、methods、computed…）
  • 如果有重名，setup优先。
• setup不能是一个async函数，因为返回值不在是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个promise实例，但需要Suspense和异步引入的组件的配合）

ref函数

1.什么是ref?

• ref和reactive一样,也是用来实现响应式数据的方法
• 由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦
• 所以Vue3提供了ref方法实现简单值得监听

​

ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.

2.ref注意点

• 在vue中使用ref的值不用通过value获取
• 在js中使用ref的值必须通过value获取
• 基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的。
• 对象类型的数据：内部“求助”了vue3.0中的新函数——reactive函数，在这个函数里面用的是ES6中的proxy函数处理对象的属性。

reactive函数

1.什么是reactive？

• 作用：定义一个对象类型的响应式数据（基础类型不要用它，要用ref函数）
• 语法：const 代理对象=reactive（源对象）接收了一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义是响应式数据是“深层次的”
• 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

2.注意点：

• 在js中使用reactive的值不必须通过value获取

响应式原理

1.vue2的响应式原理

• 实现原理：

  • 对象类型：通过Oject.defineProperty()对属性的读取、修改进行拦截（数据劫持）

  • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

    Object.defineProperty(data,'count',{
    	get(){
    		//读取
    	},
    	set(){
    		//修改
    	}
    })
    

• 存在问题：

  只能对属性读取和修改进行数据劫持，新增和删除不能在Object.defineProperty方法中监控

  • 新增属性、删除属性，界面不会更新

    解决方法：
    	添加：this.$set(对象，'属性'，值)或
    		vue.set(对象，'属性'，值)
    	删除：this.$delete(对象，'属性')或
    		vue.delete(对象，'属性')
    

  • 直接通过下标修改数组，界面不会自动更新

    解决方法：
    	添加：this.$set(数组,下标,值)或
    		数组.splice(变更下标,0/1,值)
    	删除：this.$delete(数组，下标)或
    		vue.delete(数组，下标)
    

2.vue3的响应式原理

• 实现原理：

  • 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等
  • 通过Reflect（反射）：对被代理对象的属性进行操作

  利用代理对原对象进行操作
  const 变量名=new Proxy(源对象，拦截对象)
  
  const object=new Proxy(object,{
  	get(target,propName){
  		//读取
  		return Reflect.get(target,propName)
  	},
  	set(target,propName,value){
  		//修改、添加
  		Reflect.set(target,propName,value)
  	},
  	deleteProperty(target,propName){
  		//删除 
  		return Reflect.deleteProperty(target,propName)
  	}
  })
  

reactive对比ref

• 从定义数据角度对比：

  • ref用来定义：基本类型数据
  • reactive用来定义：对象（或数组）类型数据。
  • 备注：ref也可以用来定义对象（或数组）类型数据，他内部会自动通过reactive转为代理对象。

• 从原理角度对比：

  • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）
  • reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。

• 从使用角度对比：

  • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.vaule
  • reactive定义的数据：操作数据与读取数据：均不需要.value

setup的两个注意点

• setup执行的时机

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

• setup的参数

  • props:值为对象，包含：组件外部传递过来，且组件内部申明了接收了属性。（父组件传过来的数据，要在setup外接收了属性，setup的参数才能有值）

  • context：上下文对象

    • atters：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs。
    • slots：收到的插槽内容和，相当于this.$slots。
    • emit：分发自定义事件的函数，相当于this.$emit。

    setup(props，context){
    	// setup函数有两个参数，参数一是props对象，接收父组件的传递过来的数据。参数二是context上下文对象，有attrs，slots，emit属性
    	//context.emit()相当于this.$emit
    }
    
    或
    setup(props，{emit,attrs,slots}){
    	//emit()相当于this.$emit
    	//attrs()相当于this.$attrs
    	//slots()相当于this.$slots
    }
    
    

计算属性与监视

1.computed函数

• 与Vue2中的computed配置功能一致
• 写法

import { reactive, computed } from "vue";
setup(){
	const com=reactive({
		firstName:"张",
		lastName:"三",
	})
	//计算属性-简写	
	com.fullName=computed(()=>{
		return com.firstName+"-"+person.lastName
	})
	//计算属性-完整
	com.fullName=computed(()=>{
		get(){
			return com.firstName+"-"+person.lastName
		},
		set(value){
			//value是get的返回值
			const nameArr=value.split('-')
			com.firstName=nameArr[0]
			com.lastName=nameArr[1]
		}
	})
}

2.watch函数

• 与vue2中的watch配置功能一致
• 两个小坑
  • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置无效）
  • 监视reactive定义的响应式数据中某个属性时：oldValue可以正确获取，deep配置有效

//情况一：监视ref所定义的一个响应式数据
        watch(sum,(newVal,oldVal)=>{
            console.log('person变化了',newVal,oldVal)//可以检测到新旧数据变化
        },{immediate:true})

        //情况二：监视ref所定义的多个响应式数据
        watch([sum,msg],(newVal,oldVal)=>{
            console.log('sum或msg变了',newVal,oldVal)
        },{immediate:true})

        //情况三： 监视reactive所定义的一个响应式数据的全部属性，注意：此处无法正确的获取oldValue
        watch(person,(newVal,oldVal)=>{
            //只要是reactive所定义的一个响应式数据，就好像默认开启了深度监视
            console.log('person变化了',newVal,oldVal)//打印新数据和旧数据，竟然一样
        })

        // 情况四：监视reactive所定义的一个响应式数据中的某个属性，可以检测到新旧数据
        watch(()=>person.age,(newVal,oldVal)=>{
            console.log('person的age变化了',newVal,oldVal)
        },{deep:false})

        // 情况五：监视reactive所定义的一个响应式数据中的某些属性
        watch([()=>person.name,()=>person.age],(newVal,oldVal)=>{
            console.log('person的name或age变化了',newVal,oldVal)
        },{deep:false})

        //特殊情况
        watch(()=>person.job,(newVal,oldVal)=>{
            console.log('person的job变化了',newVal,oldVal)
        },{deep:true})//监视对象中的某个属性对象，deep配置有效

3.watchEffect函数

• watch的套路：既要指明监视的属性，也要指明监视的回调。
• watchEffect的套路：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
• watchEddect有点像computed：
  • 两个函数都是有回调函数，只要函数体内的数据有变化，就会再执行一遍函数体
  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值

watchEffect(()=>{
	const x1=sum.value
	const x2=person.age
	console.log('watchEffect配置的回调执行了')
})

生命周期

• vue3中可以继续使用vue2中的生命周期钩子，但有两个被改名：
  • beforeDestroy改名为beforeUnmount
  • destroyed改名为unmounted
• Vue3也提供了Composition API形式的生命周期钩子，与vue2中钩子对应关系如下：
  • beforeCreate==>setup()
  • created=======>setup()
  • beforeMount==>onBeforeMount
  • mounted=====>onMounted
  • beforeUpdate=>onBeforeUpdate
  • updated=====>onUpdated
  • beforeUnmount=>onBeforeUnmount
  • unmounted=====>onUnmounted

setup() {
    // setup函数比vue中的生命周期beforeCreate和created函数早，setup和vue生命周期是平级的
    // setup函数的生命周期钩子比vue的钩子先触发，同类型的钩子有先后顺序。
    const sum = ref(0);
    console.log("------setup-------");
    onBeforeMount(() => {
      console.log("------onBeforeMount-------");
    });
    onMounted(() => {
      console.log("------onMounted-------");
    });
    onUnmounted(() => {
      console.log("------onUnmounted-------");
    });
    onUpdated(() => {
      console.log("------onUpdated-------");
    });
    onBeforeUnmount(() => {
      console.log("------onBeforeUnmount-------");
    })
    watchEffect(() => {
      console.log("------watchEffect-------");
    });
    return {
      sum,
    };
  },
  // #region
  // vue的生命周期（setup函数外）
  beforeCreate() {
    console.log("------beforeCreate-------");
  },
  created() {
    console.log("------created-------");
  },
    beforeMount() {
      console.log("------beforeMount-------");
    },
    mounted() {
      console.log("------mounted-------");
    },
    beforeUpdate() {
      console.log("------beforeUpdate-------");
    },
    updated() {
      console.log("------updated-------");
    },
    //   在卸载之前
    beforeUnmount() {
      console.log("------beforeUnmount-------");
    },
    //   卸载
    unmounted() {
      console.log("------unmounted-------");
    },
  //  #endregion

自定义hook函数

• 什么是hook？——本质是一个函数，把setup函数中使用的Composition API进行了封装。
• 类似于vue2中的mixin
• 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂

//1.新建一个hook目录，里面再建一个js文件
//2.在这个js文件中运用了组合式API，并向外暴露
//3.在vue组件中的setup函数使用这个js文件的数据

//以下是案例
//js文件
import { reactive, onMounted, onBeforeUnmount } from 'vue'
export default function () {
    // 获取鼠标点击时的坐标方法
    let point = reactive({
        x: 0, y: 0
    })
    function savePoint(event) {
        point.x = event.pageX;
        point.y = event.pageY;
        console.log(point.x, point.y);
        console.log(point)
    }
    onMounted(() => {
        console.log("------onMounted-------");
        //   隐藏之后点击事件还在
        window.addEventListener("click", savePoint);
        
    });
    onBeforeUnmount(() => {
        console.log("------onBeforeUnmount-------");
        window.removeEventListener("click", savePoint);
    });

    return point
}

//vue组件
	setup(){
		let point=usePoint()
		return{point}
	}

toRef

• 作用：创建一个ref对象，其value值指向另一个对象中的某个属性（原本只是一个普通变量，变成了响应式变量，且其值引用了另外一个响应式变量的值）
• 语法：const name=toRef(person,'name')
• 应用：要将响应式对象中的某个属性单独提供给外部使用时。
• 扩展：toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)

<template>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <!-- <h2>薪资:{{salary }}K</h2> -->
  <h2>薪资:{{ job.j1.salary }}K</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <!-- <button @click="salary++">涨薪</button> -->
  <button @click="job.j1.salary++">涨薪</button>
</template>
<script>
import { toRef, reactive, toRefs } from "@vue/reactivity";
export default {
  name: "ToRefCom",
  setup() {
    let person = reactive({
      name: "张三",
      age: "17",
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    return {
      //正确写法1
      //   name: toRef(person, "name"),
      //   age: toRef(person, "age"),
      //   salary: toRef(person.job.j1, "salary"),

      //正确写法2
      ...toRefs(person),

      //以下是错误写法，name,age,salary不是响应式属性
      //   name: person.name,
      //   age: person.age,
      //   salary: person.job.j1.salary,
    };
  },
};
</script>

四、其他composition API

1.shallowReactive与shallowRef

• shallowReactive：只处理对象最外层属性的响应式（浅响应式）
• shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。（对象就不会是响应式数据）
• 什么时候使用？
  • 如果有一个对象数据，结构比较深，但变化时只是外层属性变化===>shallowReactive
  • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===>shallowRef

2.readonly与shallowReadonly

• readonly：让一个响应式数据变为只读的（深只读）
• shallowReadonly：让一个响应式数据变为只读的（浅只读）
• 应用场景：不希望数据被修改时

import {readonly, shallowReadonly} from "@vue/reactivity";
// 只读不允许修改,readonly函数只接收响应式数据
person=readonly(person)

//只读最外层，属性为对象类型，也可以改属性里面的值
person=shallowReadonly(person)

3.toRaw与markRaw

• toRow：

  • 作用：将一个由reactive生成的响应式兑现转为普通对象。
  • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。（只能处理reactive）

  import {toRaw} from 'vue'
  setup(){
  	let person = reactive({
        ...
      });
  	const p=toRaw(person)
  	console.log(p) //{'属性':值,'属性':值}
  	
  	return {
  		person
  	}
  }
  
  

• markRaw:

  • 作用：标记一个对象，使其永远不会再成为响应式对象。
  • 应用场景：
    • 有些值不应被设置为响应式的，例如复杂的第三方类库等。
    • 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

  let car ={name:'奔驰',price:40}
  
   // 直接赋值，car属性是响应式数据
   person.car=car
  
  //markRaw，使car属性永远不会变成响应式对象，变成普通对象，不会改变
  person.car=markRaw(car)
  

4.customRef

• 作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制。
• 注意点：在customRef函数中的get要调用track()函数追踪（目的是修改后可以正常读取数据），在set中要调用trigger()触发模板更新

<template>
  <input type="text" v-model="keyWord" />
  <h3>{{ keyWord }}</h3>
</template>
<script>
import { customRef } from "@vue/reactivity";
export default {
  name: "CustomRefCom",
  setup() {
    // 自定义一个Ref，名为myref
    function myRef(value, delay) {
      let timer;
      return customRef((track, trigger) => {
        return {
          // 读取的时候会调用get方法
          get() {
            console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`);
            //track()修改了数据，重新获取，需要开启追踪函数，通知vue追踪value的变化，让我们能读取数据。
            track();
            return value;
          },
          //修改的时候会调用set方法
          set(newValue) {
            console.log(`有人从myRef这个容器中数据改为了：${newValue}`);

            clearTimeout(timer);
            timer = setTimeout(() => {
              // trigger()通知vue去重新解析模板（模板就是template标签里面的东西），
              //当值修改了之后，通知重新解析模板，那就会重新获取模板内容，
              //...模板中绑定的keyWord数据就会重新调用get方法，这样达到更新数据的目的。
              value = newValue;
              trigger();
            }, delay);
          },
        };
      });
    }
    let keyWord = myRef("hello", 1000);
    return {
      keyWord,
    };
  },
};
</script>

5.provide与inject

• 作用：实现祖与后代组件间通信（父子，祖孙都可以通信，只是父子可以用props）

• 注意点：祖传递的数据是响应式的，孙得到的也是响应式的数据。

• 套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据

• 具体写法：

  • 1.祖组件中：

  import {provide} from 'vue'
  setup(){
  	let car=reactive({name:'奔驰',price:'40万'})
  	provide('car',car)
  	...
  }
  

  • 2.孙祖件中：

  import {inject} from 'vue'
  setup(){
  	let car=inject('car')
  	return {car}
  }
  

6.响应式数据的判断

• isRef：检查一个值是否为一个ref对象
• isReactive：检查一个对象是否是由reactive创建的响应式代理
• isReadonly：检查一个对象是否是由readonly创建的只读代理
• isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理

import { isRef,isReactive, isReadonly, isProxy} from "vue";
setup(){
	let sum=ref(0)
	let car=reactive({name:'奔驰',price:'40W'})
    let car2=readonly(car)

    console.log(isRef(sum)) //true
    console.log(isRef(car)) //false
    console.log(isReactive(car)) //true
    console.log(isReadonly(car2)) //true
    console.log(isProxy(car)) //true
    console.log(isProxy(car2)) //true
}

五、Composition API的优势

1.Options API 存在的问题

Options API翻译过来叫配置API。使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data、methods、computed里修改。

2.Compositon API的优势

我们可以更加优雅的组织我们的代码、函数。让相关功能的代码更加有序的组织在一起。

在vue3中，我们运用setup函数可以引入hook文件中的功能模块代码，功能模块之间区分更加清晰。

六、新组件

1.Fragment

• 在vue2中：组件必须有一个跟标签
• 在vue3中：组件可以没有跟标签，内部会将多个标签包含在一个Fragment虚拟元素中。（Fragment不参与渲染）
• 好处：减少标签层级，减少内存占用。

<template>
	<h3>其实h3标签外还有一层虚拟的fragment组件</h3>
</template>

2.Teleport

• 什么是Teleport？——Teleport是一种能够将我们组件html结构移动到指定位置的技术

<!-- to属性把teleport标签中的内容指定到body标签中，也可以写id名字，#box之类的-->
    <teleport to="body">
      <div v-if="isShow" class="mask">
        <div class="dialog">
          <h3>我是一个弹窗</h3>
          <h4>内容</h4>
          <h4>内容</h4>
          <h4>内容</h4>
          <button @click="isShow = false">关闭弹窗</button>
        </div>
      </div>
    </teleport>
    
<script>
import { ref } from "vue";
export default {
  name: "NewCom",
  setup() {
    let isShow = ref(false);
    return { isShow };
  },
};
</script>
<style scoped>
.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  width: 300px;
  height: 300px;
  background: green;
}
</style>

• 注意点：to属性把teleport标签中的内容指定到body标签中，也可以写id名字，#box之类的

3.Suspense

目前属于实验阶段，以后这个组件可能会改

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

• 使用步骤：

  • 异步引入组件

  import {defineAsyncComponent} from 'vue'
  const Child=defineAsyncComponent(()=>import('./components/NewCom/NewCom.vue')) //  动态/异步引入
  

  • 使用Suspense包裹组件，并配置好default与fallback。Suspense组件的内部原理是利用了插槽，一个插槽是要加载的组件，另外一个插槽是加载提示。

    <Suspense>
      <template v-slot:default>
        <!-- 这个模板里是要展示的对象 -->
        <Child></Child>
      </template>
      <template v-slot:fallback>
        <!-- 这个模板是加载提示语 -->
        <h3>加载中...</h3>
      </template>
    </Suspense>
  

• 注意点：Suspense组件不需要申明和引入，是vue3中内置的组件，直接在vue中使用。

扩展：静态引入是等组件里所有嵌套的子组件都加载好了再显示到页面上，这会导致页面加载缓慢。用异步引入子组件的会让加载好的组件先显示在页面上。

七、其他

全局API的转移

• vue2有许多全局API和配置

  • 例如：注册全局组件、注册全局指令等。

  //注册全局组件
  Vue.component('MyButton',{
  	data:()=>({
  		count:0
  	}),
  	template:'<button @click="count++">Clicked{{count}}times.</button>'
  })
  
  //注册全局指令
  Vue.directive('focus',{
  		inserted:el=>el.focus()
  	} 
  )
  

• vue3中对这些API做出来调整：

  • 将全局的API，即：Vue.xxx调整到应用实例（app）上

其它改变

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

• 过度类名的更改：

  • vue2写法

  .v-enter,
  .v-leave-to{
  	opacity:0;
  }
  .v-leave,
  .v-enter-to{
  	opcaity:1;
  }
  

  • vue3写法

  .v-enter-from,
  .v-leave-to{
  	opacity:0;
  }
  .v-leave-from,
  .v-enter-to{
  	opcaity:1;
  }
  

• 移除keyCode作为v-on的修饰符，同时也不再支持config.keyCodes

• 移除v-on.native修饰符

  • 父组件中绑定事件

  <my-component v-on:close="handleComponentEvent" v-on:click="handleComponentEvent" />
  

  • 子组件中声明自定义事件

  <script>
  	export default{
  	emits:['close']
  	}
  </script>
  

  在父组件中绑定了事件，如果在子组件中声明了emits:[‘…’]，那么就是自定义事件。如果没有声明，就默认为原生事件。

• 移除过滤器（filter）

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是“只是javascript”的假设，这不仅有学习成本，而且有实现成本！建议用方法或计算属性去替换过滤器。