vue3新特性

vue3新特性

本人学习是参照b站的黑马视频讲解，感觉还不错，就此推荐下。

视频推荐 b站搜索 vue3.0新特性–黑马刘老师

课件网址：破解vue.3新特性

ss

在项目中安装 composition-api 体验 vue3 新特性

npm install @vue/composition-api --save

在使用任何 @vue/composition-api 提供的能力前，必须先通过 Vue.use() 进行安装

mport Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

下面记录下本人学习总结：

1. setup() 函数，是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。

   1.1 setup 函数会在 beforeCreate 之后、created 之前执行

   ​ 感觉setup是可以完全替代beforeCreate，created的存在

   2.2 setup函数有两个形参

   ​ 第一个形参是props，就是接收父组件传递来的数据，props是一个对象，传递来的数据都在这个对象里

   第二个形参是context（相当于this）。应为在setup中无法使用this，所以需要这个context来代替下this，来执行this的方法。

   比如：

   const MyComponent = {
     setup(props, context) {
       context.attrs
       context.slots
       context.parent
       context.root
       context.emit
       context.refs
     }
   }
   

2. reactive() 函数接收一个普通对象，返回一个响应式的数据对象。

​ 这个方法怎么说能，其实是和ref是一样的，只不过ref是一个一个的定义，而reactive可以一下定义一堆，但是： return出去的时候就不好了。因为它本身就是个响应式数据对象，你只return一个它就没法return其他方法了，你解构在ruturn的话，他就不在是个相应数据了。

​ 这个问题也有办法解决，就是使用toRefs方法转换一下。

import { toRefs } from '@vue/composition-api'

setup() {
    // 定义响应式数据对象
    const state = reactive({
      count: 0
    })

    // 定义页面上可用的事件处理函数
    const increment = () => {
      state.count++
    }

    // 在 setup 中返回一个对象供页面使用
    // 这个对象中可以包含响应式的数据，也可以包含事件处理函数
    return {
      // 将 state 上的每个属性，都转化为 ref 形式的响应式数据
      ...toRefs(state),
      // 自增的事件处理函数
      increment
    }
}

3. ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性

   此方法和reactive的区别是，你在setup方法中使用ref定义的响应式数据需要.value一下才能拿到，return返回出去的时候则不需要。

   ref不止可以当一个方法来创建相应式数据，还可以当作一个指令来获取dom或者组件

   在 onMounted（生命周期函数，vue3新写法）中可以为获取到的标签更改样式或其他。

   如果获取的是组件，可以直接使用组件数据，或者调用组件方法。

   4. isRef() 用来判断某个值是否为 ref() 创建出来的对象；应用场景：当需要展开某个可能为 ref() 创建出来的值的时候，例如：

      import { isRef } from '@vue/composition-api'
      
      const unwrapped = isRef(foo) ? foo.value : foo
      

   5. toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据

      上面已经说到过了。

6.computed() 用来创建计算属性，computed() 函数的返回值是一个 ref 的实例。使用 computed 之前需要按需导入：

跟 vue2 的用法差不多。可以创建一个只读的属性，获取是即可读又可写（可被修改）

只读：

const plusOne = computed(() => count.value + 1)

可读可写：

// 创建一个 computed 计算属性
const plusOne = computed({
  // 取值函数
  get: () => count.value + 1,
  // 赋值函数
  set: val => {
    count.value = val - 1
  }
})

7.watch() 函数用来监视某些数据项的变化，从而触发某些特定的操作，使用之前需要按需导入

7.1监听不同数据源的响应式数据时写法会有不同

注：我在实际试验时，发现问题，在reactive定义单个数据被监听时，用wacth会报过时，建议用watchEffect，多个数据监听时则没有，用ref定义的也都没有问题。（可能时vue3刚发布还不是很稳定）

reactive定义的相应式数据时：

const state = reactive({ count: 0, name: 'zs' })

watch(
  [() => state.count, () => state.name], // Object.values(toRefs(state)),
  ([count, name], [prevCount, prevName]) => {
    console.log(count) // 新的 count 值
    console.log(name) // 新的 name 值
    console.log('------------')
    console.log(prevCount) // 旧的 count 值
    console.log(prevName) // 新的 name 值
  },
  {
    lazy: true // 在 watch 被创建的时候，不执行回调函数中的代码
  }
)

setTimeout(() => {
  state.count++
  state.name = 'ls'
}, 1000)

ref定义的相应数据

const count = ref(0)
const name = ref('zs')

watch(
  [count, name], // 需要被监视的多个 ref 数据源
  ([count, name], [prevCount, prevName]) => {
    console.log(count)
    console.log(name)
    console.log('-------------')
    console.log(prevCount)
    console.log(prevName)
  },
  {
    lazy: true
  }
)

setTimeout(() => {
  count.value++
  name.value = 'xiaomaolv'
}, 1000)

7.2在 setup() 函数内创建的 watch 监视，会在当前组件被销毁的时候自动停止。如果想要明确地停止某个监视，可以调用 watch() 函数的返回值即可，语法如下

// 创建监视，并得到 停止函数
const stop = watch(() => {
  /* ... */
})

// 调用停止函数，清除对应的监视
stop()

7.3 有时候，当被 watch 监视的值发生变化时，或 watch 本身被 stop 之后，我们期望能够清除那些无效的异步任务，此时，watch 回调函数中提供了一个 cleanup registrator function 来执行清除的工作。这个清除函数会在如下情况下被调用：

• watch 被重复执行了
• watch 被强制 stop 了

8. createComponent

   这个函数不是必须的，除非你想要完美结合 TypeScript 提供的类型推断来进行项目的开发。

这个函数仅仅提供了类型推断，方便在结合 TypeScript 书写代码时，能为 setup() 中的 props 提供完整的类型推断。

import { createComponent } from 'vue'

export default createComponent({
  props: {
    foo: String
  },
  setup(props) {
    props.foo // <- type: string
  }
})