Vue3学习（第二天）
- 一、vscode创建vue3模板
- 1.打开vscode点击左下角设置按钮，点击配置用户代码片段
- 2.点击vue.json，把模板输入。
- 二、响应式基础(ref()和reactive())
- 1.ref()函数
- 2.reactive()
- 三、computed计算属性
- 四、watch侦听器
- 1.侦听一个ref()：
- 2.侦听多个时使用数组：
- 3.深层侦听
- 五、watchEffect高级侦听器
- 停止侦听器
一、vscode创建vue3模板
1.打开vscode点击左下角设置按钮，点击配置用户代码片段
2.点击vue.json，把模板输入。
"Create Vue3 template":{
"prefix": "vue3",
"body": [
"<template>",
"",
"<div></div>",
"",
"</template>",
"",
"<script setup lang='ts'>",
"import { ref , reactive } from 'vue'",
"",
"</script>",
"<style scoped>",
"",
"</style>",
],
"description": "Create VUE3 template"
}完成后在新建vue页面中输入vue3回车即可自动生成vue3模板。
二、响应式基础(ref()和reactive())
在vue3中，所有被ref()或者reactive()包裹的东西才是响应式的。
1.ref()函数
ref() 方法允许我们创建可以使用任何值类型的响应式 ref：
在没有引用ref()时，点击按钮想要修改count值会发现页面内容没有变化。
在引用ref()时
可以看到成功修改，而且count的值是一个ref对象，需要使用count.value才会选到值。
ref()还可以获取dom元素：
2.reactive()
仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。
reactive取值赋值不需要.value，可以直接取值赋值。
值得注意的是，reactive()是一个Proxy对象，不能直接赋值，否则会破坏响应对象，可以使用push。
三、computed计算属性
vue3中的computed属性需要import才可以使用，写法与vue2类似：
四、watch侦听器
在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数。
watch()函数可以直接侦听ref、reactive、或多个数据源等。
1.侦听一个ref()：
2.侦听多个时使用数组：
3.深层侦听
当出现这种好几层的对象时ref()会出现无法侦听但是reactive会正常侦听：
此时ref()侦听后加入deep选项即可：
如果要监听单一值时需要注意把值变成一个函数：
watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
我们可以通过传入 immediate: true 选项来强制侦听器的回调立即执行：
watch(source, (newValue, oldValue) => {
// 立即执行，且当 `source` 改变时再次执行
}, { immediate: true })五、watchEffect高级侦听器
watchEffect()函数在进入页面时回调会立即执行一次，不需要指定 immediate: true。在执行期间，它会自动追踪 .value 作为依赖（和计算属性类似）。每当 .value 变化时，回调会再次执行。
停止侦听器
要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：
const unwatch = watchEffect(() => {})
// ...当该侦听器不再需要时
unwatch()
