新特性

組合API setup()

1、數(shù)據(jù)的中轉站（props支持直接獲取props對象、變量、函數(shù)...）。
2、兩個參數(shù)：（props、context 包含attrs、slots、emit）。
3、在Vue生命鉤子創(chuàng)建前就已經(jīng)聲明完成。所以獲取不到this的存在。
4、setup函數(shù)只能是同步的不能是異步的。

// 官方簡單示例
// src/components/UserRepositories.vue

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: {
      type: String,
      required: true
    }
  },
  setup(props) {
    console.log(props，{ attrs、slots、emit }) // { user: '' }
    // props 是響應式引用。`不能用ES6的解構賦值`
    // { attrs、slots、emit } 是普通的js對象 `可用ES6的解構賦值`
    return {} // 這里返回的任何內容都可以用于組件的其余部分
  }
  // 組件的“其余部分”
}

帶 ref 的響應式變量（響應式引用）

1、響應式變量（監(jiān)聽、動態(tài)值）和非響應式變量（不監(jiān)聽、常量值）。
2、保持 JavaScript 中不同數(shù)據(jù)類型的行為統(tǒng)一，這是必須的。這是因為在 JavaScript 中，Number 或 String 等基本類型是通過值而非引用傳遞的。
3、在任何值周圍都有一個封裝對象，這樣我們就可以在整個應用中安全地傳遞它，而不必擔心在某個地方失去它的響應性。
4、ref 為我們的值創(chuàng)建了一個響應式引用。在整個組合式 API中會經(jīng)常使用引用的概念。
5、toRefs 作用：用于響應式引用的解構賦值。

import { ref } from 'vue'

const counter = ref(0)

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

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

setup的生命周期鉤子

組合式 API 上的生命周期鉤子與選項式 API 的名稱相同，但前綴為 on：即 mounted 看起來會像 onMounted。

beforeCreate -> use setup() // 創(chuàng)建前
created -> use setup() // 創(chuàng)建后
beforeMount -> onBeforeMount // 掛載前
mounted -> onMounted // 掛載后
beforeUpdate -> onBeforeUpdate // 數(shù)據(jù)更新前
updated -> onUpdated // 數(shù)據(jù)更新后
......

watch 響應式更改

就像我們在組件中使用 watch 選項并在 user property 上設置偵聽器一樣，我們也可以使用從 Vue 導入的 watch 函數(shù)執(zhí)行相同的操作。它接受 3 個參數(shù)：
1、一個想要偵聽的響應式引用或 getter 函數(shù)
2、一個回調
3、可選的配置選項

import { ref, watch } from 'vue'

const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})

獨立的 computed 屬性

import { ref, computed } from 'vue'

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2

完整示例

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch, toRefs, computed } from 'vue'

// 在我們的組件中
setup (props) {
  // 使用 `toRefs` 創(chuàng)建對 props 中的 `user` property 的響應式引用
  const { user } = toRefs(props)

  const repositories = ref([])
  const getUserRepositories = async () => {
    // 更新 `props.user ` 到 `user.value` 訪問引用值
    repositories.value = await fetchUserRepositories(user.value)
  }

  onMounted(getUserRepositories)

  // 在 user prop 的響應式引用上設置一個偵聽器
  watch(user, getUserRepositories)

  const searchQuery = ref('')
  const repositoriesMatchingSearchQuery = computed(() => {
    return repositories.value.filter(
      repository => repository.name.includes(searchQuery.value)
    )
  })

  return {
    repositories,
    getUserRepositories,
    searchQuery,
    repositoriesMatchingSearchQuery
  }
}}
}