Vue3 基本语法

1. setup语法

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视等，均配置在setup中。

特点如下：

• setup函数返回的对象中的内容，可直接在模板中使用。
• setup中访问this是undefined。
• setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

2. ref语法

作用：定义响应式变量（支持基本类型和对象类型）。

语法：let xxx = ref(初始值)。

使用：JS中操作数据需要xx.value，但模板中不需要.value，直接使用即可。

标签的ref属性：

• 用于注册模板引用。
• 用在普通DOM标签上，获取的是DOM节点。
• 用在组件标签上，获取的是组件实例对象。

 3. reactive语法

作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）。

语法：let响应式对象= reactive(源对象)。

注意点：reactive定义的响应式数据是“深层次”的。

4. ref和reactive对比

（1）ref用来定义基本类型数据和对象类型数据，reactive定义对象类型数据。

（2）ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。

（3）reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

使用原则：

• 若需要一个基本类型的响应式数据，必须使用ref。
• 若需要一个响应式对象，层级不深，ref、reactive都可以。
• 若需要一个响应式对象，且层级较深，推荐使用reactive。

5. toRefs与toRef

作用：将一个响应式对象中的每一个属性，转换为ref对象。toRefs与toRef功能一致，但toRefs可以批量转换。

let {name,gender} =  toRefs(person)

6. compute计算属性

作用：根据已有数据计算出新数据，计算属性默认是只读的。用到“可写”的属性，可以通过同时提供 getter 和 setter 来创建：

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
// getter
  get() {
    return firstName.value + '' + lastName.value
  },
  // setter
  set(newValue){
  // 注意: 我们这里使用的是解构贼值语法
  [firstName.value,lastName.value] = newValue. split('')
  }
})
</script>

7. watch用法

作用：监视数据的变化

特点：Vue3中的watch只能监视以下四种数据：

• ref定义的数据。

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

• reactive定义的数据。

监视reactive定义的【对象类型】数据，且默认开启了深度监视。

• 函数返回一个值（getter函数）。

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

若该属性值不是【对象类型】，需要写成函数形式。

若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

• 一个包含上述内容的数组。

8. watchEffect用法

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

• watch对比watchEffect

都能监听响应式数据的变化，不同的是监听数据变化的方式不同

watch：要明确指出监视的数据

watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

9. props用法

9.1 仅接收

const props = defineProps(['list'])

9.2 接收+限制类型

defineProps<{list:Persons}>()

9.3 接收+限制类型+指定默认值+限制必要性

let props = withDefaults(defineProps<{list?:Persons}>(),{

  list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]

})

10. hooks用法

10.1 什么是hook？

本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。

10.2 自定义hook的优势

复用代码, 让setup中的逻辑更清楚易懂。

10.3 ts中定义

import {ref,onMounted} from 'vue'
export defalut function(){
  let sum = ref(0)
  const increment = () => {
    sum.value++
  }
  const decrement = () => {
    sum.value--
  }
  onMounted(() => {
    increment()
  })
  //向外暴露数据
  return {sum,increment,decrement}
}

10.4 组件中具体使用

<template>
  <h2>当前求和为:[{sum}]</h2>
  <button @click="increment">点我+1</button>
  <button @click="decrement">点我-1</button>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name :' App'
})
</script>
<script setup lang="ts">
  import useSum from  './hooks/useSum'
  let {sum, increment,decrement} = useSum()
</script>