vue3学习笔记——第一节

1. 创建及引入的改变

- 创建vue3项目

通过脚手架vue-cli创建

npm install -g @vue/cli 或 yarn global add @vue/cli
vue create app-name 或 通过ui页面进行创建

- 项目中引入vue3

vue3引入方式

import { createApp } from 'vue'; //引入工厂函数
import App from './App.vue'; //导入app组件
const app = createApp(App)
app.mount('#app')

vue2引入方式

import Vue from 'vue'
import App from './app.vue'
new Vue({
  render: h => h(App)
}).$mount('#app')

vue3的组件可以不写根标签，vue3会自动的将元素包裹到一个fragment中

2. 组合式API

- setup配置项

vue3新增了setup配置项，原有的data、methods、computed等等配置项都可以在setup中书写，setup在beforeCreate之前执行一次，此时this值为undefined，所以在setup中不推荐使用this，有以下几个注意点：

1. 其值是一个函数，里面可以写属性方法等
2. 可以传递两个参数：props、context
3. 需要return一个对象，将模板所需的属性或方法返回
4. 不能书写异步方法（通常来看）

setup: function(props, context) {
	let name = 'wmh',
	let age = 18
	return {
		name,
		age
	}
}

setup的参数问题：

1. props：值为一个对象，包含组件外部传递过来，且在组件内部通过props配置项声明接收了的属性，
2. context：上下文对象，包含三个内容
   • attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性
   • slots：收到的插槽内容
   • emit：分发自定义事件的函数，需要配置emits配置项

3. 响应式API

1. ref和reactive：响应式函数

ref和reactive函数：响应性基础api

import { ref } from 'vue' //导入ref函数

setup() {
	let name = ref('wmh') //接收一个值并返回一个响应式可变的ref对象（引用对象）
	name.value = 'wyz' //需要通过.value操作值
	return {
		name
	}
}

import { creative } from 'vue' //导入creative函数

setup() {
	let person = creative({ //返回一个reactive对象（代理对象）
		name:'wmh',
		age: 18
	}) 
	person.name = 'wyz' //不需要通过.value操作值
	return {
		person
	}
}

ref和reactive的对比：

1. 从定义数据类型看：ref用来定义基本数据类型，也可以用来定义对象及数组，其内部会自动通过reactive转为代理对象；reactive用来定义对象或数组
2. 从响应式原理看：ref函数是通过object.defineProperty的set、get实现数据拦截，从而实现响应式；reactive函数则是通过proxy（代理）实现数据拦截，通过reflect操作属性
3. 从使用方式看：ref需要使用.value来操作属性，但模板输出时不需要；reactive则是都不需要.value

2. computed：计算属性函数

使用方式类似vue2，但定义有些许不同，用代码演示

import { computed } from 'vue' //导入computed函数
//以下代码书写在setup配置项中

// 写法一：简写
let fullName = computed({
	return firstName + lastName
})

// 写法二：完整写法
let fullName = computed({
    get(){
		return firstName + lastName    
	}    
	set(){}
})

2. watch：侦听函数

1. 普通watch函数

类似vue2的watch配置项，书写在setup配置项中，需要注意的是，它监听的是一个reactive或ref对象，意思是，在这里侦听时不需要.value，

• 通过import导入：

import { watch } from 'vue' //导入watch函数
let count = ref(0) //定义一个ref对象
let count1 = ref(18)
let person = reactive({ //定义一个代理对象
	name: 'wmh',
	age: 18
})

• 监听单一属性：

// 监听ref对象
watch(count, (count, oldCount) => {
  /* ... */
})

// 监听代理对象
watch(person, person => {
  /* ... */
})

监听reactive包裹的代理对象时，oldValue无法正确获得且强制开启深度监视

• 监听代理对象的某个具体属性：

// 监听person的name属性
watch(() => person.name, (value, oldValue) => {
	/* ... */
})

监视reactive定义的数据中的某个属性时，deep配置生效（需要手动配置深度监视）
注意，此处oldValue可以正确获得

• 监听代理对象的某些具体属性：用数组包裹

// 监听person的name和age属性
watch([() => person.name,() => person.age], (value, oldValue) => {
	/* ... */
})

• 监听多个属性：用数组包裹

// 监听多个属性
watch([count, count1], ([count, count1], [oldCount, oldCount1]) => {
  /* ... */
})

2. watchEffect函数

不同于普通的watch函数，既需要指明侦听的属性，也需要指明回调，watchEffect不用指明侦听哪个属性，侦听的回调中用到哪个属性，就侦听哪个属性

import { watchEffect } from 'vue'
let name = ref('wmh')
let age = ref(18)

// 以下代码使用到name和age属性，则会自动监听这两个属性
watchEffect(() => {
	const x1 = name.value
	const x2 = age.value
})

watchEffect和computed的对比：

• computed注重的是计算出来的值（回调函数的返回值），所以必须要返回值
• watchEffect则更加注重过程（回调函数的函数体），所以不需要返回值