vue3.x玩转setup丨技术开发分享录

vue3.x玩转setup

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"## 入门\n\n```html\n<!DOCTYPE html>\n<html>\n\n<head>\n    <title>vue3.x</title>\n    <script src=\"https://unpkg.com/vue@next\"></script>\n</head>\n\n<body>\n    <div id=\"app\">\n        {{ readersNumber }} {{ book.title }}\n    </div>\n\n    <script type=\"text/javascript\">\n        Vue.createApp({\n            setup() {\n                let readersNumber = Vue.ref(0)\n                const book = Vue.reactive({ title: 'Vue 3 Guide' })\n\n                readersNumber.value++;\n\n                return {\n                    readersNumber,\n                    book\n                }\n            }\n        }).mount('#app')\n    </script>\n</body>\n\n</html>\n```\n\n`setup` 接收2个参数 `props` 和 `context`\n\n\n## 一、props\n\n```\nexport default {\n  props: {\n    title: String\n  },\n  setup(props) {\n    console.log(props.title)\n  }\n}\n```\n\n>[warning] 注意: `props`是响应式的,所以不能使用ES6解构,因为它会破坏 prop 的响应性\n \n如果需要解析 `props` 的话,可以通过 `toRefs` 实现:\n\n```\nimport { toRefs } from 'vue'\n\nsetup(props) {\n    const { title } = toRefs(props)\n\n    console.log(title.value)\n}\n```\n\n如果 `title` 属性是可选的,就得使用 `toRef` 代替 `toRefs`:\n\n```\nimport { toRef } from 'vue'\nsetup(props) {\n    const title = toRef(props, 'title')\n    console.log(title.value)\n}\n```\n\n## 二、Context\n\n`context` 是一个普通的非响应式的 JavaScript 对象,类似vue2.x的this,因为在 `setup()` 里 `this` 不是对实例的引用。\n\n`context` 暴露了三个组件属性:\n\n```\nexport default {\n  setup(props, context) {\n    // Attribute (非响应式对象)\n    console.log(context.attrs)\n\n    // 插槽 (非响应式对象)\n    console.log(context.slots)\n\n    // 触发事件 (方法)\n    console.log(context.emit)\n  }\n}\n```\n\n解构示例:\n\n```\nexport default {\n  setup(props, { attrs, slots, emit }) {\n    ...\n  }\n}\n```\n\n`attrs` 和 `slots` 是有状态的对象,它们会随组件本身的更新而更新。\n这意味着你应该避免对它们进行解构,并始终以 attrs.x 或 slots.x 的方式引用 property。\n\n>[warning] 注意:与 `props` 不同,`attrs` 和 `slots` 是非响应式的。如果你打算根据 `attrs` 或 `slots` 更改应用副作用,那么应该在 `onUpdated` 生命周期钩子中执行此操作。\n\n## 三、访问组件的 property\n\n执行 setup 时,组件实例尚未被创建。因此,你只能访问以下 property:\n\n- props\n- attrs\n- slots\n- emit\n\n换句话说,你将**无法访问**以下组件选项:\n\n- data\n- computed\n- methods\n\n## 四、结合模板使用\n\n```html\n<template>\n  <div>{{ readersNumber }} {{ book.title }}</div>\n</template>\n\n<script>\n  import { ref, reactive } from 'vue'\n\n  export default {\n    setup() {\n      const readersNumber = ref(0)\n      const book = reactive({ title: 'Vue 3 Guide' })\n\n      return {\n        readersNumber,\n        book\n      }\n    }\n  }\n</script>\n```\n\n## 五、使用渲染函数\n\n```\nimport { h, ref, reactive } from 'vue'\n\nexport default {\n  setup() {\n    const readersNumber = ref(0)\n    const book = reactive({ title: 'Vue 3 Guide' })\n\n    return () => h('div', [readersNumber.value, book.title])\n  }\n}\n```\n\ncdn静态页示例:\n\n```html\n<script src=\"https://unpkg.com/vue@next\"></script>\n\n<div id=\"app\">\n  <!-- 渲染setup返回的div -->\n</div>\n\n<script type=\"text/javascript\">\n    Vue.createApp({\n        setup() {\n            let readersNumber = Vue.ref(0)\n            const book = Vue.reactive({ title: 'Vue 3 Guide' })\n\n            readersNumber.value++;\n\n            return () => Vue.h('div', [readersNumber.value, book.title]) // <div>{{ readersNumber }} {{ book.title }}</div>\n        }\n    }).mount('#app')\n</script>\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看