vue3学习（第二天）

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