phpfunctionsetup技巧_vue3x新特点之setup函数看完就会用了

import { getCurrentInstance} from 'vue'setup() { const count = 10; // 非相应式的。
const { proxy } = getCurrentInstance(); // 这里 proxy 相称于this console.log(proxy.msg) // 不能在setup调用时访问data里面的属性 return { count, consoleMsg: () => { console.log(proxy.msg) // 123，点击按钮时可以访问了 } }},data() { return { msg: '123' }},created() { console.log(this.count) // 10，这时可以访问setup抛出的属性了。
}

2、setup 还可以返回一个渲染函数，不过返回一个渲染函数将阻挡我们返回任何其它的东西，当我们想暴漏函数给其父组件利用的时候，可以利用expose来处理这个问题。
示例如下：

import { h, ref } from 'vue'export default { setup(props, { expose }) { const count = ref(0) // 创建一个相应式的变量 const increment = () => ++count.value expose({ increment }) return () => h('div', count.value) // 请把稳这里我们须要显式利用 ref 的 value }}

看到这里就完备可以利用setup来做项目了，接下来便是封山开路遇水搭桥，碰到不会的就各种查，磕磕碰碰总能成功。
然而一篇帖子不能写到这里就结束了，后面还有一大堆干系的知识点呢。

为什么聊相应式呢，由于setup里面返回的变量虽然可以直接在模版语法中利用，但是它并不是相应式的，如上面第一个示例，我们如果在模版中利用了{{ count }}来展示count的值，然后我们改变count的值，值改变了，但是显示不会变革。

// 非相应式示例，等价于缺点示例，请只管即便不要复制这块代码到你项目中去了。
<template> <div> <span>{{ count }}</span> <button @click="count ++; consoleValue(count)">Increment count</button> </div></template><script> export default { setup() { let count = 10; // 这里不是相应式的。
return { count, consoleValue: (value) => { console.log(value); // 这里值发生了变革 } } } }</script>

相应式这块在官网api比较多，只说几个用得比较多的。
1、上面有提到的ref，ref 吸收参数并将其包裹在一个带有 value property 的工具中返回，然后可以利用该 property 访问或变动相应式变量的值。
最大略的例子，上面示例改成相应式的，如下：

<template> <div> <span>{{ count }}</span> <button @click="count ++">Increment count</button> <button @click="doubleCount">double count</button> </div></template><script> import { ref } from 'vue' export default { setup() { let count = ref(10); return { count, doubleCount: () => { // 值得把稳在setup里面须要利用.value来访问 count.value = 2; } } } }</script>

2、reactive返回工具的相应式副本。
这个比较好理解，跟以前2.x时期差别不大。

<template> <div> <span>{{ countObj.count }}</span> <button @click="countObj.count ++">Increment count</button> <button @click="doubleCount">double count</button> </div></template><script> import { reactive } from 'vue' export default { setup() { const countObj = reactive({ count: 10 }); return { countObj, doubleCount: () => { countObj.count = 2; } } } }</script>

3、toRef 和 toRefs 这两个函数都是为了获取一个相应式的子项，并且跟以前的相应式数据进行关联

<template> <div> <div>{{ countObj.count }} {{countObj.changeTimes}}</div> <div>{{ count }} {{ changeTimes }}</div> <button @click="count ++; changeTimes ++">increment count</button> <button @click="doubleCount">double count</button> </div></template><script> import { reactive, toRefs, toRef } from 'vue' export default { setup() { const countObj = reactive({ count: 10, changeTimes: 0 }); const { count } = toRefs(countObj); const changeTimes = toRef(countObj, 'changeTimes'); return { countObj, count, changeTimes, doubleCount: () => { countObj.count = 2; changeTimes.value ++; } } } }</script>

把稳：toRefs 只会为源工具中包含的 property 天生 ref。
如果要为特定的 property 创建 ref，则应该利用toRef，大略粗暴的理解toRef可以给源工具添加一个关联的相应式属性，如：（本想写在上面示例中，不过觉得不清晰，就单独列了一块伪代码）

const countObj = reactive({ count: 10 });const testV = toRef(countObj, 'test');testV.value = 10;console.log(countObj.test); // 10setup 参数

利用 setup 函数时，它将吸收两个参数：Propssetup 函数中的第一个参数是 props。
正如在一个标准组件中所期望的那样，setup 函数中的 props 是相应式的，当传入新的 prop 时，它将被更新。

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

但是，由于 props 是相应式的，你不能利用 ES6 解构，它会肃清 prop 的相应性，上面说到的toRefs可以很好的办理这个问题。

import { toRefs } from 'vue'setup(props) { const { title } = toRefs(props) console.log(title.value)}

如果 title 是可选的 prop，则传入的 props 中可能没有 title 。
在这种情形下，toRefs 将不会为 title 创建一个 ref 。
你须要利用 toRef 替代它：

import { toRef } from 'vue'setup(props) { const title = toRef(props, 'title') console.log(title.value)}

Context通报给 setup 函数的第二个参数是 context。
context 是一个普通 JavaScript 工具，暴露了其它可能在 setup 中有用的值：

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) }}setup生命周期钩子

在setup中可以访问到以下生命周期钩子：

这些函数接管一个回调函数，当钩子被组件调用时将会被实行，如：

export default { setup() { // mounted onMounted(() => { console.log('Component is mounted!') }) }}

原创不易，转载请注明出处，欢迎留言发起。