Vue3?setup?的作用實例詳解

更新時間：2022年12月29日 16:04:07 作者：清風?與我

setup?用來寫組合式?API，從生命周期的角度，相當于取代了?beforeCreate()，這篇文章主要介紹了Vue3?setup?的作用,需要的朋友可以參考下

setup 具體怎么用：

setup 用來寫組合式 API，從生命周期的角度，相當于取代了 beforeCreate()

setup 的數(shù)據(jù)和方法如何使用？

1.setup(){} 內部的屬性和方法，必須用 return 暴露出來。

將屬性掛載到實例上，否則沒有辦法使用。
語法糖：寫在 script 開始標簽中，內部的屬性和方法，無需 return 暴露；
無法和選項式 API 混用。

2.setup 內部使用時，沒有 this

3.鉤子函數(shù)可以和 setup 并列存在

4.setup 不能調用生命周期相關函數(shù)，或者嵌套存在。

5.生命周期相關函數(shù)可以調用 setup 相關的屬性和方法

6.可以使用 this

setup 參數(shù)

使用 setup 時，它將接收兩個參數(shù)：props 和 context

props：

表示父組件給子組件傳的數(shù)據(jù)；
props是響應式的，當數(shù)據(jù)發(fā)生改變時，自動更新
因為 props 是響應式的，不能使用 Es6 的解構，如果使用會消除響應式特性(使用 toRefs)

context：

上下文環(huán)境。其中包括了，屬性，插槽，自定義事件三個部分。

attrs：是一個非響應式對象，主要接受 no-props(非props)屬性。經(jīng)常用來傳遞一些樣式/標簽特有屬性。
slots：是一個 Proxy 對象，其中 slots.default() 獲取到一個數(shù)組。數(shù)組長度表示插槽的數(shù)量，數(shù)組中的元素是插槽的內容。
emit：因為在 setup 中沒有 this，所以使用 emit 來替換之前的 this.$emit(‘自定義事件名稱’，傳遞的值)。用于子傳父時，自定義事件的觸發(fā)
示例：emit(‘自定義事件名稱’，傳遞的值)

setup 特性總結：

這個函數(shù)會在 created 之前執(zhí)行。
setup 內部沒有 this，不能掛載 this 相關的東西
setup 內部的屬性和方法，必須 return 暴露出來。（語法糖中不需要）
setup 內部的屬性都不是響應式的；
setup 不能調用生命周期相關函數(shù)，但生命周期相關函數(shù)可以調用 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函數(shù)的作用與實現(xiàn)

setup函數(shù)是vue3新增組件選項，其作用為

配合組合式api,建立組合邏輯、創(chuàng)建響應式數(shù)據(jù)、創(chuàng)建通用函數(shù)，注冊生命周期鉤子的能力
setup函數(shù)只會在被掛載時執(zhí)行
setup返回值有兩種
函數(shù)
對象
若為對象，則將對象包含的數(shù)據(jù)暴漏給模板使用
在渲染組件的函數(shù)中從組件上取出setup，獲取其執(zhí)行的返回值，判斷其是否為函數(shù)，并將其掛載到組件實例上
若為函數(shù)，則賦值給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的第二個參數(shù)，包含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的數(shù)據(jù)代理上做出對setupState的監(jiān)聽

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 的作用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: