是时候该学习Vue3了-setup()这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战 Vue2

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

Vue2 食用了太久了, Vue3 也发布很久很久了(只怪更新迭代太快(真是内卷太严重了...)), 本文将来学习一下 Vue3 的新语法 setup() 这是一个神奇的钩子, 与 Vue2.x 的 methods/watch/computed 等各写各的不同, 在 Vue3 中各种方法函数工具钩子都可写在 setup()内, 然后通过 return{} 返回.

Vue3.x 的新特性 `setup()`函数

对于 Vue3.x 听到的最多的高级功能更新就是 composition-api 了. 在 Vue2.x 中使用的 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效(因为组件化模块化一般一个.vue文件的行数建议不超过 300 行, 但是还是有很多同学就是会写出十倍 3000 行的.vue文件组件)。这就是当组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人以及后续阅读/查找 bug/更新/迭代来说，这会导致组件难以阅读和理解, 就太不明显小麻烦了!

`setup(参数){}` 函数的参数

使用 setup 函数时，它将接收两个参数：

props
context

setup 函数参数： Props

props 是 setup 函数中的第一个参数。比如一个标准组件中，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

// postDetail.vue

export default {
  props: {
    title: String,
  },
  setup(props) {
    console.log(props.title)
  },
}

注意: 因为 props 是响应式的，不能使用 ES6 解构，使用解构操作将会消除 prop 的响应性.

但是还想使用解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作：

// postDetail.vue

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)

  console.log(title.value) // 某某文章详情页
}

setup 函数参数： Context

context 是传递给 setup 函数的第二个参数。context 是一个普通 JavaScript 对象(也就是说它不是响应式的, 那就是可以方便地使用 ES6 的解构进行数据操作了)，暴露了其它可能在 setup 中有用的值：

// postDetail.vue

export default {
  setup(props, context) {
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)

    // 暴露公共 property (函数)
    console.log(context.expose)
  },
}

参考文档

Vue3 官方文档: v3.cn.vuejs.org/guide/compo…

学贵坚持, 加油

立个小目标, 这个月更文坚持下来, 有没有 xdm 一起打卡, 加油!

是时候该学习Vue3了-setup()

Vue3.x 的新特性 setup()函数

setup(参数){} 函数的参数