01.setup,reactive,ref,computed,watch学习---2023新版Vue3基础入门到实战项目

1.Vue3组合式

2.创建vue3项目

2.1认识create-vue

create-vue是官方新的脚手架工具，vite下一代构建工具
node -v >16
npm init vue@latest

2.2 setup

原始写法

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

语法糖写法：

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

接收对象类型数据的参数传入，返回响应式对象

<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，非脚本区域直接使用数据

<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,避免直接修改计算属性的值。

<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，精确侦听对象的某个属性

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