Vue3 setup 的作用实例详解

Vue3 setup 的作用 Vue3 setup 2022-12-29 18:12:28 852人浏览薄情痞子

摘要

目录setup 具体怎么用：setup 的数据和方法如何使用？setup 参数setup 特性总结：总结：vue3中setup函数的作用与实现从 Vue2 升级 vue3，vue3

setup 具体怎么用：

setup 用来写组合式 API，从生命周期的角度，相当于取代了 beforeCreate()

setup 的数据和方法如何使用？

1.setup(){} 内部的属性和方法，必须用 return 暴露出来。

将属性挂载到实例上，否则没有办法使用。
语法糖：写在 script 开始标签中，内部的属性和方法，无需 return 暴露；
无法和选项式 API 混用。

2.setup 内部使用时，没有 this

3.钩子函数可以和 setup 并列存在

4.setup 不能调用生命周期相关函数，或者嵌套存在。

5.生命周期相关函数可以调用 setup 相关的属性和方法

6.可以使用 this

setup 参数

使用 setup 时，它将接收两个参数：props 和 context

props：

表示父组件给子组件传的数据；
props是响应式的，当数据发生改变时，自动更新
因为 props 是响应式的，不能使用 es6 的解构，如果使用会消除响应式特性(使用 toRefs)

context：

上下文环境。其中包括了，属性，插槽，自定义事件三个部分。

attrs：是一个非响应式对象，主要接受 no-props(非props)属性。经常用来传递一些样式/标签特有属性。
slots：是一个 Proxy 对象，其中 slots.default() 获取到一个数组。数组长度表示插槽的数量，数组中的元素是插槽的内容。
emit：因为在 setup 中没有 this，所以使用 emit 来替换之前的 this.$emit(‘自定义事件名称’，传递的值)。用于子传父时，自定义事件的触发
示例：emit(‘自定义事件名称’，传递的值)

setup 特性总结：

这个函数会在 created 之前执行。
setup 内部没有 this，不能挂载 this 相关的东西
setup 内部的属性和方法，必须 return 暴露出来。（语法糖中不需要）
setup 内部的属性都不是响应式的；
setup 不能调用生命周期相关函数，但生命周期相关函数可以调用 setup

setup 在代码中的使用

<script>
import { onMounted, toRefs } from "vue";
export default {
  props: {
    msg: "abc",
  },
  setup(props, context) {
    let { msg } = toRefs(props);
    let { attrs, slots, emit } = context;
    console.log(props, context);
    let num = 10;
    return {
      num,
    };
    // 和setup，嵌套的生命周期
    // onMounted(() => {
    //   console.log("onMounted", num);
    // });
  },
  // 和setup，并列的生命周期
  mounted() {
    console.log("挂载后");
    console.log(this.$options);
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

总结：

以上就是 vue3 中 setup 的作用。

知识点扩展：

Vue3中setup函数的作用与实现

setup函数是vue3新增组件选项，其作用为

配合组合式api,建立组合逻辑、创建响应式数据、创建通用函数，注册生命周期钩子的能力
setup函数只会在被挂载时执行
setup返回值有两种
函数
对象
若为对象，则将对象包含的数据暴漏给模板使用
在渲染组件的函数中从组件上取出setup，获取其执行的返回值，判断其是否为函数，并将其挂载到组件实例上
若为函数，则赋值给instance.render
若为对象，则将其变成响应式，并赋值给instance.setupState

export function setupComponent(instance){
    let { type,props,children}  = instance.vnode
    let {data,render,setup} = type
    //初始化属性
    initProps(instance,props);
    instance.proxy = new Proxy(instance,instanceProxy);
    if(data){
        if(!isFunction(data)){
            return console.warn('The data option must be a function.')
        }
        //给实例赋予data属性
        instance.data = Reactive(data.call({}))
    }
    if(setup){
      //setup的第二个参数，包含emit,attrs，slots等
      const context = {}
      const setupResult = setup(instance.props,context)
      if(isFunction(setupResult)){
        instance.render = setupResult
      }else if(isObject(setupResult)){
        instance.setupState = proxyRefs(setupResult)
      }
    }
    if(!instance.render){
      if(render){
      instance.render = render

      }else {
        //模板编译
      }
    } 
}

同时，instance的数据代理上做出对setupState的监听

const instanceProxy = {
    get(target,key){
        const { data,props,setupState} = target
        if(data && hasOwn(data,key)){
            return data[key]
        }else if(setupState && hasOwn(setupState,key)){
          return setupState[key]
        }
        else if(props && hasOwn(props,key)){
            return props[key]
        }
        let getter = publicProperties[key]
        if(getter){
            return getter(target)
        }
    },
    set(target,key,value,receiver){
        // debugger
        const {data,props,setupState} = target
        if(data && hasOwn(data,key)){
            data[key] = value
        }else if( setupState && hasOwn(setupState,key)){
            setupState[key]  = value
        }
        else if(props && hasOwn(props,key)){
            console.warn('props not update');
            return false
        }
        return true
    }
}

到此这篇关于Vue3 setup 的作用的文章就介绍到这了,更多相关Vue3 setup 的作用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue3 setup 的作用实例详解

本文链接: https://www.lsjlt.com/news/176227.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341