组合式vue

vue组合式风格

setup

所有使用到的响应式状态都应在setup函数里面定义。

<script>
// `setup` 是一个专门用于组合式 API 的特殊钩子函数
  setup() {
    const state = reactive({ count: 0 })
    // 暴露 state 到模板
    return {
      state
    }
  }
</script>

注意这里state是一个响应式对象，在该对象里可以定义多个成员，每个成员被修改时都会触发响应式渲染。

当状态非常多时这种定义方法会非常繁琐，在script标签中加上setup可以简化操作。

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

function increment() {
  state.count++
}
</script>

声明响应式状态

可以使用reactive()创建响应式对象。

但是注意声明响应式对象必须使用const

reactive的缺陷：

• 仅对集合类型有效，对原始数据类型无效。
• 必须保持对响应式对象的相同引用，才能保证响应性不会丢失。

使用ref（）可以创建任何值类型（包含原始数据类型）的响应式ref。

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

用value表示其值或者对其进行修改。当在模板中ref作为顶层属性被使用的时候，他会自动解包。不需要使用value

<template>
  <div>
    这是主组件
    <div @click="solveRec">reactive:{{ rec.value }}</div>
    <div @click="solveRef">ref:{{ re }}</div>
  </div>

</template>

<script setup>
import {reactive,ref} from 'vue'

const rec = reactive({value:0})
const re  = ref(0)

const solveRef = () => {
    console.log("solveRef Called")
    test(re)
}
const solveRec = () => {
    console.log("solveRec Called")
    test(rec)
}
const test = (e) => {
    console.log("test Called",e.value)
    e.value = 3;
}
</script>

当ref被签到在一个响应式对象中，被当作属性访问时，他会自动解包。

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 0

state.count = 1
console.log(count.value) // 1

计算属性

与选项式中的计算属性类似。但是写法稍有区别。

const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

<span>{{ publishedBooksMessage }}</span>

计算属性会基于其使用到的响应式依赖进行缓存，只有在其依赖被更新的时候其值才会呗重新计算。

生命周期钩子

与选项式类似，当你在组合式用法中需要根据生命周期执行一些函数时，可以使用生命周期钩子。

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

类似的还有onMounted,onUpdated,onUnmounted

生命周期钩子详情

vue生命周期

侦听器

在很多情况下，你可能想要在某个响应式状态被修改时进行一些副作用操作，这时候可以用watch函数来监听这种变化并进行一些操作。

<script setup>
import { reactive, ref, watch } from 'vue'

const question = ref('')
const answer = reactive({new:'',old:''})

watch(question, async (newQuestion, oldQuestion) => {
  answer.new=newQuestion
    answer.old=oldQuestion
}
)
</script>

<template>
  <p>
    <input v-model="question" />
  </p>
  <p>old:{{ answer.old }}<br/>new:{{ answer.new }}</p>
</template>

这份代码监听了question的变化，并且根据question的变化改变了anwser

访问dom

在某些情况下可能需要直接对dom的操作。

使用ref可以获取到该dom。为模板中的dom节点声明一个ref属性，然后通过ref钩子就可以获取到该dom。

<script setup>
import { ref, onMounted } from 'vue'

const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="inputref" />
</template>

注意这里的ref的引用名字必须为inputref，即需要与模板中声明的ref对应。