vue3.0 新特性

Setup

setup函数是Composition API逻辑组织的入口。

<template>
 	<div>{{ title }}</div>
</template>

<script>
export default (
  setup() {
    const title = 'vue'
    return {
		title
	}
  }
)
</script>

Reactive

reactive 相当于 Vue 2.x 中的 Vue.observable() API ，该 API 返回一个响应式的对象状态。

<template>
 	<div>标题: {{ state.title }}</div>
</template>

<script>
import { reactive } from "vue"
export default (
  setup() {
    const state = reactive({ title: 'vue' })
    return {
		state
	}
  }
)
</script>

Ref

该方法接收一个参数，可以是单个值，也可以是一个对象，并且都是响应式的数据。当传入一个对象时{}，内部将调用reactive方法进行转换为响应式数据。返回值里面带有.value属性取值，当使用模板渲染的时候可省去.value。

<template>
 	<div>数量: {{ count }}</div>
</template>

<script>
import { ref } from "vue"
export default (
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
		count,
		increment 
	}
  }
)
</script>

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref。
使用 reactive 组合函数时必须始终保持对这个所返回对象的引用以保持响应性。这个对象不能被解构或展开，一旦被解构或者展开，返回的值将失去响应式。
toRefs API 用来提供解决此约束的办法——它将响应式对象的每个 property 都转成了相应的 ref。

<script>
import { reactive } from "vue"
export default (
  setup() {
    const state = reactive({ title: 'vue' })
    const stateAsRefs = toRefs(state)
    const { title } = stateAsRefs 
    return {
		title 
	}
  }
)
</script>

Computed

computed是一个函数，它接收一个回调函数作为参数，返回一个基于该值的响应式Ref对象。也可以接收一个对象形式（对象中只有set和get）作为参数。

<template>
 	<div>标题: {{ title }}</div>
</template>

<script>
import { ref } from "vue"
export default (
  setup() {
    const title = ref('vue')
    let setTitle = computed({
        get() {
            return title.value
        },
        set(val) {
            return title.value = val
        }
    })
   
    return {
		title,
		setTitle 
	}
  }
)
</script>

Watch

watch是一个函数，它不会立即执行，只有当监听源发生变化时才会执行。它可以监听多个数据

• 监听单个数据

<script>
import { ref, watch } from "vue"
export default (
  setup() {
    // 侦听一个ref
    const count = ref(0)
   	watch(count , (newVal, oldVal) => {
        console.log(newVal, oldVal) // 1, 0
    })
    
	// 侦听一个getter
	const state = reactive({ count: 0 })
	watch(
	  () => state.count,
	  (count, prevCount) => {
	    /* ... */
	  }
	)
    
    setTimeout(() => {
        count.value = 1
        state.count ++
    }, 1000)
  }
)
</script>

• 监听多个数据

<script>
import { ref, watch } from "vue"
export default (
  setup() {
    const count = ref(0)
    const title = ref('vue')
   	watch([count, title] , (newVal, oldVal) => {
        console.log(newVal, oldVal) // [1,'前端'] [0, 'vue']
    })
    
    setTimeout(() => {
        count.value = 1
        title.value = '前端'
    }, 1000)
    
    return {
		count,
		title
	}
  }
)
</script>