新特性

组合API setup()

1、数据的中转站（props支持直接获取props对象、变量、函数...）。
2、两个参数：（props、context 包含attrs、slots、emit）。
3、在Vue生命钩子创建前就已经声明完成。所以获取不到this的存在。
4、setup函数只能是同步的不能是异步的。

// 官方简单示例
// 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、响应式变量（监听、动态值）和非响应式变量（不监听、常量值）。
2、保持 JavaScript 中不同数据类型的行为统一，这是必须的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值而非引用传递的。
3、在任何值周围都有一个封装对象，这样我们就可以在整个应用中安全地传递它，而不必担心在某个地方失去它的响应性。
4、ref 为我们的值创建了一个响应式引用。在整个组合式 API中会经常使用引用的概念。
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() // 创建前
created -> use setup() // 创建后
beforeMount -> onBeforeMount // 挂载前
mounted -> onMounted // 挂载后
beforeUpdate -> onBeforeUpdate // 数据更新前
updated -> onUpdated // 数据更新后
......

watch 响应式更改

就像我们在组件中使用 watch 选项并在 user property 上设置侦听器一样，我们也可以使用从 Vue 导入的 watch 函数执行相同的操作。它接受 3 个参数：
1、一个想要侦听的响应式引用或 getter 函数
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` 创建对 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
  }
}}
}