[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其他改变

🥽 前言

本笔记根据如下笔记和视频进行整理
老师的课件笔记，不含视频 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 --version
vue -V
## 安装或者升级@vue/cli
npm install -g @vue/cli

使用vue-cli创建Vue3项目

vue create vue3_study

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

🌊 vite

vite创建Vue3项目步骤：

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

npm init vite-app vue3_study_vite

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

cd vue3_study_vite

npm i

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

npm run dev

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

🥽 项目结构

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

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

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

🥽 ref 函数

<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>

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

🥽 reactive函数

<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>

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

🥽Vue3.0中的响应式原理

🌊 vue2.x的响应式

🌊 Vue3.0的响应式

🥽 reactive对比ref

🥽 setup的两个注意点

App.vue

<template>
	<Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
		<!-- Vue3中具名插槽使用 `v-slot:插槽名` -->
		<template v-slot:qwe>
			<span>尚硅谷</span>
		</template>
		<template v-slot:asd>
			<span>尚硅谷</span>
		</template>
	</Demo>
</template>
<script>
	import Demo from './components/Demo'
	export default {
		name: 'App',
		components:{Demo},
		setup(){
			// 自定义事件的处理函数
			function showHelloMsg(value){
				alert(`你好啊，你触发了hello事件，我收到的参数是:${value}！`)
			}
			return {
				showHelloMsg
			}
		}
	}
</script>

Demo.vue

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{person.name}}</h2>
	<h2>年龄：{{person.age}}</h2>
	<button @click="test">测试触发一下Demo组件的Hello事件</button>
</template>
<script>
	import {reactive} from 'vue'
	export default {
		name: 'Demo',
		props:['msg','school'],
		emits:['hello'], // 绑定的自定义事件在组件中需要使用emits配置项接收
		setup(props,context){
			// 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>

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

🥽 computed函数

<template>
	<h1>一个人的信息</h1>
    姓: <input type="text" v-model="person.firstName"><br/>
    名: <input type="text" v-model="person.lastName"><br/>
    <p>全名: {{person.fullName}}</p>
</template>
<script>
	import {reactive, computed} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				firstName: '张',
        		lastName: '三'
			})
	      // 计算属性
	      person.fullName = computed(()=>{
	        return person.firstName + '-' + person.lastName
	      })
			//返回一个对象
			return {
				person,
			}
		 }
	}
</script>

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

🥽 watch函数

	//数据
 let sum = ref(0)
   let msg = ref('你好啊')
   let person = reactive({
   	name:'张三',
   	age:18,
   	job:{
   		j1:{
   			salary:20
   		}
   	}
   })
//情况一：监视ref定义的响应式数据
// 第一个参数为监视的数据，第二个参数为回调函数，第三个参数为配置属性
watch(sum,(newValue,oldValue)=>{
	console.log('sum变化了',newValue,oldValue)
},{immediate:true})
//情况二：监视多个ref定义的响应式数据
// newValue,oldValue为数组类型数据
watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变化了',newValue,oldValue)
}) 
/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			如果需要获取监视对象中某个属性的oldValue，可以采用将该属性单独取出使用ref的形式
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
// 如果监视的对象为使用ref函数实现响应式，则需要监视`变量.value`，对于对象类型数据ref借助了reactive
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效
//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) 
//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})
//特殊情况
// 监视reactive所定义的对象中的某个属性，且该属性也为对象类型
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效

🥽 watchEffect函数

🥽 生命周期

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

🥽 自定义hook函数

src\hooks\usePoint.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(event.pageX,event.pageY)
	}
	//实现鼠标“打点”相关的生命周期钩子
	onMounted(()=>{
		window.addEventListener('click',savePoint)
	})
	onBeforeUnmount(()=>{
		window.removeEventListener('click',savePoint)
	})
	return point
}

Demo.vue

<template>
	<h2>当前求和为：{{sum}}</h2>
	<button @click="sum++">点我+1</button>
	<hr>
	<h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>
<script>
	import {ref} from 'vue'
	import usePoint from '../hooks/usePoint'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let point = usePoint()
			//返回一个对象（常用）
			return {sum,point}
		}
	}
</script>

🥽 toRef

<template>
	<h4>{{person}}</h4>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h2>薪资：{{job.j1.salary}}K</h2>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>
<script>
	import {ref,reactive,toRef,toRefs} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})
			// const name1 = person.name
			// console.log('%%%',name1)
			// const name2 = toRef(person,'name')
			// console.log('####',name2)
			const x = toRefs(person)
			console.log('******',x)
			//返回一个对象（常用）
			return {
				person,
				// name:toRef(person,'name'),
				// age:toRef(person,'age'),
				// salary:toRef(person.job.j1,'salary'),
				...toRefs(person)
			}
		}
	}
</script>

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

🥽 shallowReactive 与 shallowRef

🥽 readonly 与 shallowReadonly

🥽 toRaw 与 markRaw

🥽 customRef

  <template>
  	<input type="text" v-model="keyword">
  	<h3>{{keyword}}</h3>
  </template>
  <script>
  	import {ref,customRef} from 'vue'
  	export default {
  		name:'Demo',
  		setup(){
  			// let keyword = ref('hello') //使用Vue准备好的内置ref
  			//自定义一个myRef
  			function myRef(value,delay){
  				let timer
  				//通过customRef去实现自定义
  				return customRef((track,trigger)=>{
  					return{
  						get(){ // 读取数据时调用
  							track() //告诉Vue这个value值是需要被“追踪”的，告诉vue追踪数据的变化
  							return value
  						},
  						set(newValue){ // 修改数据时调用
  							clearTimeout(timer) // 触发就清除原先的定时器不执行之前定时器的回调
  							timer = setTimeout(()=>{
  								value = newValue // 修改数据
  								trigger() //告诉Vue去更新界面，重新解析模板
  							},delay)
  						}
  					}
  				})
  			}
  			let keyword = myRef('hello',500) //使用程序员自定义的ref
  			return {
  				keyword
  			}
  		}
  	}
  </script>

🥽 provide 与 inject

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

🥽 响应式数据的判断

🥽 Composition API 的优势

🌊 Options API (配置式API)存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。同一个需求的数据、方法等较分散不集中。

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

🌊 Composition API (组合式API)的优势

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

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

🥽 Fragment

🥽 Teleport

<template>
	<div>
		<button @click="isShow = true">点我弹个窗</button>
		<!-- 将html结构移动到body中 -->
		<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>
	</div>
</template>
<script>
	import {ref} from 'vue'
	export default {
		name:'Dialog',
		setup(){
			let isShow = ref(false)
			return {isShow}
		}
	}
</script>
<style>
	.mask{
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.dialog{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 300px;
		height: 300px;
		background-color: green;
	}
</style>

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

🥽 Suspense

// 静态引入只要组件不引入成功，当前整个组件都不会进行显示
// import Child from './components/Child'//静态引入
// 异步引入引入的组件等加载完成再进行显示，当前组件可以不用等待引入成功即可先进行显示
import {defineAsyncComponent} from 'vue' 
const Child = defineAsyncComponent(()=>import('./components/Child')) //异步引入

🥽 Vue3全局API的转移

🥽 Vue3其他改变

标签 , ,

发表回复