1.Vue3组合式
2.创建vue3项目
2.1认识create-vue
create-vue是官方新的脚手架工具，vite下一代构建工具
node -v >16
npm init vue@latest
2.2 setup
原始写法
javascript
<script>
export default {
//执行时机比beforeCreate早
//获取不到this
//数据和函数必须return出去
setup() {
//数据
const message = 'hello vue3'
//函数
const logMessage = () => {
console.log(message)
}
return {
message, logMessage
}
},
beforeCreate() {
console.log('beforeCreate函数')
}
}
</script>
<template>
<h1>{{ message }}</h1>
<button @click="logMessage">点我</button>
</template>语法糖写法：
javascript
<script setup>
const message = 'this is message'
const logMessage = () => {
console.log(message);
}
</script>
<template>
<h1>{{ message }}</h1>
<button @click="logMessage">点我</button>
</template>总结:
1.setup选项的执行时机？
beforeCreate钩子之前，自动执行
2.setup写代码的特点是什么？
定义数据+函数，然后以对象方式return
3.setup解决了什么问题？
经过语法糖的封装更简单的使用组合式API
4.setup中的this还指向组件实例吗？
不指向，组件实例还未创建，undefined
2.3 reactive()
接收对象类型数据的参数传入，返回响应式对象
javascript
<script setup>
//接收对象类型数据的参数传入，返回响应式对象
import { reactive } from 'vue'
const state = reactive({
count: 100
})
const addOne = () => {
state.count++
}
</script>
<template>
<div>
<div>{{ state.count }}</div>
<button @click="addOne">+1</button>
</div>
</template>2.4 ref()
如果是简单类型，用ref() 推荐
接收简单类型和对象类型数据传入并返回响应式对象
本质是对传入数据包了一层，包成复杂类型之后，再借助reactive实现响应式。
脚本中访问数据需要通过.value，非脚本区域直接使用数据
javascript
<script setup>
//接收对象类型数据的参数传入，返回响应式对象
import { ref } from 'vue'
const count = ref(0)
console.log(count.value);
const addOne = () => {
count.value++
}
</script>
<template>
<div>
<div>{{ count }}</div>
<button @click="addOne">+1</button>
</div>
</template>总结：
1.reactive和ref函数共同作用是什么？
用函数调用的方式生成响应式数据
2.reactive vs ref?
reactive不能处理简单类型的数据
ref参数类型支持更好但是必须通过.value访问修改
ref函数的内部实现依赖于reactive函数
3.在实际工作中推荐使用哪个？
推荐使用ref函数，更加灵活统一
2.5 computed
最佳实践：不应该有副作用，异步请求，修改dom,避免直接修改计算属性的值。
javascript
<script setup>
import { ref, computed } from 'vue'
//声明数据
const list = ref(
[1, 2, 3, 4, 5, 6, 7, 8]
)
//基于list派生一个计算属性，从list中过滤出 > 2
const computedList = computed(() => {
return list.value.filter(item => item > 2)
})
//定义一个修改数组的方法
const addFn = () => {
list.value.push(666)
}
</script>
<template>
<div>
<div>原始数据：{{ list }}</div>
<div>计算后的数据：{{ computedList }}</div>
<button @click="addFn">修改</button>
</div>
</template>2.6 watch
侦听简单对象和复杂对象以及immediate和deep，精确侦听对象的某个属性
javascript
<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const nickname = ref('张三')
const changeCount = () => {
count.value++
}
const changeNickName = () => {
nickname.value = nickname.value + '三'
}
//1.监视单个数据的变化
//watch(ref对象,(newValue,oldValue)=>{...})
// watch(count, (newValue, oldValue) => {
// console.log(newValue, oldValue)
// })
// watch(nickname, (nv, ov) => {
// console.log(nv, ov);
// })
//监视多个数据的变化
//watch([ref1,ref2],(newArr,oldArr)=>{...})
/* watch([count, nickname], (newArr, oldArr) => {
console.log(newArr, oldArr);
}) */
//立刻执行immediate
/* watch([count, nickname], (newArr, oldArr) => {
console.log(newArr, oldArr);
}, {
immediate: true
}) */
//深度监视 deep,默认是浅层监视，ref简单类型，直接监视，ref2复杂类型，监视不到内部数据变化
const userInfo = ref({
name: 'zs',
age: 18
})
const setUserInfo = () => {
userInfo.value.age++
}
/* watch(userInfo, (nv, ov) => {
console.log(nv, ov)
}, {
deep: true//深度监视，对象子属性变化也能监视到
}) */
//对于对象中的属性来进行监视,固定写法
watch(() => userInfo.value.age, (nv, ov) => {
console.log(nv, ov);
})
</script>
<template>
<div>
{{ count }}
</div>
<button @click="changeCount">改数字</button>
<div>
{{ nickname }}
</div>
<button @click="changeNickName">改昵称</button>
<div>------------------------------------------</div><br>
<div>{{ userInfo }}</div>
<button @click="setUserInfo">修改userinfo</button>
</template>总结：
1.watch第一个参数需要加.value吗？
不需要
2.只能侦听单个数据吗？
单个或者多个
3.不开启deep，直接监视复杂类型，修改属性，能触发回调吗？
不能，默认浅层监听
4.不开启deep，精确侦听对象的某个属性？
可以把第一个参数写成函数的写法，返回要监听的具体属性。