[Vue]Vue3学习笔记(尚硅谷)

文章目录🥽 前言🥽 创建Vue3项目🌊 vue-cli🌊 vite🥽 项目结构🥽 Vue3开发者工具的安装🥽 初识setup🥽 ref 函数🥽 reactive函数🥽Vue3.0中的响应式原理🌊 vue2.x的响应式🌊 Vue3.0的响应式🥽 reactive对比ref🥽 setup的两个注意点🥽 computed函数🥽 watch函数🥽 watchEffect函数🥽 生命周期🥽 自定义hook函数🥽 toRef🥽 shallowReactive 与 shallowRef🥽 readonly 与 shallowReadonly🥽 toRaw 与 markRaw🥽 customRef🥽 provide 与 inject🥽 响应式数据的判断🥽 Composition API 的优势🌊 Options API (配置式API)存在的问题🌊 Composition API (组合式API)的优势🥽 Fragment🥽 Teleport🥽 Suspense🥽 Vue3全局API的转移🥽 Vue3其他改变🥽 前言

推荐整理分享[Vue]Vue3学习笔记(尚硅谷)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

本笔记根据如下笔记和视频进行整理 老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

🥽 创建Vue3项目🌊 vue-cli

使用vue-cli创建Vue3项目，需要确保vue-cli版本在4.5.0以上。

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue --versionvue -V## 安装或者升级@vue/clinpm install -g @vue/cli

使用vue-cli创建Vue3项目

vue create vue3_study

🌊 vite

vite创建Vue3项目步骤：

## 创建工程npm init vite-app <project-name>## 进入工程目录cd <project-name>## 安装依赖npm install## 运行npm run devnpm init vite-app vue3_study_vite

cd vue3_study_vitenpm i

npm run dev

🥽 项目结构

使用的为vue-cli创建的项目

src\main.js

// 引入的为一个名为createApp的工厂函数，不再是Vue构造函数import { createApp } from 'vue'import App from './App.vue'// 创建应用实例对象，类似于Vue2中的vm，但是更“轻”，并挂载根标签createApp(App).mount('#app')

src\App.vue

<template> <!-- Vue3组件中的模板结构可以没有根标签 --> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/></template>🥽 Vue3开发者工具的安装

可参考：[Vue]开发环境搭建

🥽 初识setup

setup是Vue3.0中一个新的配置项，值为一个函数。setup是所有Composition API（组合API）“ 表演的舞台 ”。组件中所用到的：数据、方法、计算属性等等，均要配置在setup中。

setup函数的两种返回值：

若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。<template> <h1>个人介绍</h1> <h2>name: {{name}}</h2> <h2>age: {{age}}</h2> <button @click="sayHello">打招呼</button></template><script>export default { name: 'App', // 测试setup, 不考虑响应式 setup() { // 数据 let name = 'ZS' let age = 22 // 方法 function sayHello() { alert(`my name is ${name}, I am ${age}, hello`) } // 返回一个对象 return { name, age, sayHello } }}</script>

若返回一个渲染函数：则可以自定义渲染内容。<template> <h1>个人介绍</h1> <h2>name: {{name}}</h2> <h2>age: {{age}}</h2> <button @click="sayHello">打招呼</button></template><script>import {h} from 'vue' // 导入渲染函数export default { name: 'App', // 测试setup, 不考虑响应式 setup() { // 数据 let name = 'ZS' let age = 22 // 方法 function sayHello() { alert(`my name is ${name}, I am ${age}, hello`) } // 返回一个对象 // return { // name, // age, // sayHello // } // 返回一个函数(渲染函数) // h1为渲染到页面的标签，hello world为渲染内容 // h1为渲染到页面的标签，hello world为渲染内容 return ()=>{ return h('h1', 'hello world') } }}</script>

在Vue3中仍然可以使用Vue2的配置项

<template> <h1>个人介绍</h1> <h2>name: {{name}}</h2> <h2>age: {{age}}</h2> <h2>sex: {{sex}}</h2> <button @click="sayHello">打招呼 vue3</button> <button @click="sayWelcome">打招呼 vue2</button></template><script>export default { name: 'App', data() { return { sex: 'male' } }, methods: { sayWelcome() { alert('hello world vue2') } }, // 测试setup, 不考虑响应式 setup() { // 数据 let name = 'ZS' let age = 22 // 方法 function sayHello() { alert(`my name is ${name}, I am ${age}, hello`) } // 返回一个对象 return { name, age, sayHello } }}</script>

setup尽量不要与Vue2.x配置混用。Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。但在setup中不能访问到Vue2.x配置（data、methos、computed…）。

<template> <h1>个人介绍</h1> <h2>name: {{name}}</h2> <h2>age: {{age}}</h2> <h2>sex: {{sex}}</h2> <button @click="sayHello">打招呼 vue3</button> <button @click="sayWelcome">打招呼 vue2</button> <button @click="test1">vue2配置项读取setup属性方法</button> <button @click="test2">setup配置项读取vue2配置项属性方法</button></template><script>export default { name: 'App', data() { return { sex: 'male' } }, methods: { sayWelcome() { alert('hello world vue2') }, test1() { console.log(this.name) console.log(this.age) console.log(this.sayHello) } }, // 测试setup, 不考虑响应式 setup() { // 数据 let name = 'ZS' let age = 22 // 方法 function sayHello() { alert(`my name is ${name}, I am ${age}, hello`) } function test2() { console.log(this.sex) console.log(this.sayWelcome) } // 返回一个对象 return { name, age, sayHello, test2, } }}</script>

Vue2配置项如果与setup中的属性或方法冲突，setup优先。即发生冲突时，以Vue3为主。

<template> <h1>a: {{a}}</h1></template><script>export default { name: 'App', data() { return { a: 100 } }, // 测试setup, 不考虑响应式 setup() { // 数据 let a = 200 // 返回一个对象 return { a } }}</script>

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

🥽 ref 函数作用: 定义一个响应式的数据语法: const xxx = ref(initValue)创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。JS中操作数据： xxx.value模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>备注：接收的数据可以是：基本类型、也可以是对象类型。基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。<template> <h1>个人信息</h1> <p>name: {{name}}</p> <p>age: {{age}}</p> <p>job: {{job.type}}</p> <p>salary: {{job.salary}}</p> <button @click="changeInfo">修改信息</button></template><script>import {ref} from 'vue'export default { name: 'App', setup() { // 数据 let name = ref('ZS') let age = ref(22) let job = ref({ type: '前端工程师', salary: '30k' }) // 方法 function changeInfo() { name.value = 'LS' age.value = 30 job.value.type = 'Java开发工程师' job.value.salary = '40k' } // 返回一个对象 return { name, age, job, changeInfo } }}</script>

🥽 reactive函数作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）reactive定义的响应式数据是“深层次的”。内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。<template> <h1>个人信息</h1> <p>name: {{name}}</p> <p>age: {{age}}</p> <p>job: {{job.type}}</p> <p>salary: {{job.salary}}</p> <p>hobby: {{hobby}}</p> <p>测试数据：{{job.a.b.c}}</p> <button @click="changeInfo">修改信息</button></template><script>import {ref, reactive} from 'vue'export default { name: 'App', setup() { // 数据 let name = ref('ZS') let age = ref(22) let job = reactive({ type: '前端工程师', salary: '30k', a: { b: { c: 1000 } } }) let hobby = reactive(['football', 'basketball']) // 方法 function changeInfo() { name.value = 'LS' age.value = 30 job.type = 'Java开发工程师' job.salary = '40k' job.a.b.c = 2000 hobby[0] = 'reading' } // 返回一个对象 return { name, age, job, hobby, changeInfo } }}</script>

🥽Vue3.0中的响应式原理🌊 vue2.x的响应式

实现原理：

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

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

Object.defineProperty(data, 'count', { get () {}, set () {}})

存在问题：

新增属性、删除属性, 界面不会更新。使用this.$set(对象, '新属性名', '新属性值')或Vue.set(对象, '新属性名', '新属性值')新增属性，使用this.$delete(对象, '属性名')或Vue.$delete(对象, '属性名')删除属性。直接通过下标修改数组, 界面不会自动更新。使用this.$set(数组, 数组下标, ‘新值’)或数组.splice(下标, 下标+1, ‘新值’)实现修改数组元素值。🌊 Vue3.0的响应式

在Vue3中不存在“新增属性、删除属性, 界面不会更新”与“直接通过下标修改数组, 界面不会自动更新”的问题。

<template> <h1>个人信息</h1> <p v-show="person.name">name: {{person.name}}</p> <p>age: {{person.age}}</p> <p v-show="person.sex">sex: {{person.sex}}</p> <p>hobby: {{person.hobby}}</p> <button @click="changeInfo">changeInfo</button> <button @click="addSex">addSex</button> <button @click="deleteName">deleteName</button></template><script>import {ref, reactive} from 'vue'export default { name: 'App', setup() { // 数据 const person = reactive({ name: 'ZS', age: 22, hobby: ['apple', 'orange'] }) // 方法 function changeInfo() { person.hobby[0] = 'mango' } function addSex() { person.sex = 'male' } function deleteName() { delete person.name } // 返回一个对象 return { person, changeInfo, addSex, deleteName, } }}</script>

实现原理:

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

//源数据let person = {name:'张三',age:18}//模拟Vue3中实现响应式//Proxy对属性的增删改查都可以监测得到//#region const p = new Proxy(person,{//有人读取p的某个属性时调用get(target,propName){console.log(`有人读取了p身上的${propName}属性`)return target[propName]},//有人修改p的某个属性、或给p追加某个属性时调用set(target,propName,value){console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)target[propName] = value},//有人删除p的某个属性时调用deleteProperty(target,propName){console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)return delete target[propName]}})//#endregion

通过Reflect（反射）: 对源对象的属性进行操作。

// Reflect（反射）// 读取对象指定属性的值Reflect.get(object, '属性名')// 修改对象指定属性的值Reflect.set(object, '属性名', '新属性值')// 删除对象指定属性Reflect.deleteProperty(object, '属性名')//模拟Vue3中实现响应式//#region const p = new Proxy(person,{//有人读取p的某个属性时调用get(target,propName){console.log(`有人读取了p身上的${propName}属性`)return Reflect.get(target,propName)},//有人修改p的某个属性、或给p追加某个属性时调用set(target,propName,value){console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)Reflect.set(target,propName,value)},//有人删除p的某个属性时调用deleteProperty(target,propName){console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)return Reflect.deleteProperty(target,propName)}})//#endregion

MDN文档中描述的Proxy与Reflect：

Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

new Proxy(data, {// 拦截读取属性值 get (target, prop) { return Reflect.get(target, prop) }, // 拦截设置属性值或添加新属性 set (target, prop, value) { return Reflect.set(target, prop, value) }, // 拦截删除属性 deleteProperty (target, prop) { return Reflect.deleteProperty(target, prop) }})proxy.name = 'tom' 🥽 reactive对比ref从定义数据角度对比：ref用来定义：基本类型数据。reactive用来定义：对象（或数组）类型数据。备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。从原理角度对比：ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。从使用角度对比：ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。reactive定义的数据：操作数据与读取数据：均不需要.value。一般将数据封装在一个data对象中，利用reactive函数将该对象变为响应式数据对象🥽 setup的两个注意点setup执行的时机在beforeCreate之前执行一次，this是undefined，在setup无法使用this。setup的参数props：值为对象，包含：组件外部传递过来，且组件内部