Mate60手機(jī)殼曝光 致敬自己的經(jīng)典設(shè)計(jì)
8月3日消息，今天下午博主數(shù)碼閑聊站帶來(lái)了華為Mate60的第三方手機(jī)殼圖，可以讓我們?cè)谡鏅C(jī)發(fā)布之前看看這款華為全新旗艦的大致輪廓。從曝光的圖片看，Mate 60背后攝像頭面積依然
眾所周知，vue3的template中使用ref變量無(wú)需使用.value。還可以在事件處理器中進(jìn)行賦值操作時(shí)，無(wú)需使用.value就可以直接修改ref變量的值，比如：<button @click="msg = 'Hello Vue3'">change msg</button>。你猜vue是在編譯時(shí)就已經(jīng)在代碼中生成了.value，還是運(yùn)行時(shí)使用Proxy攔截的方式去實(shí)現(xiàn)的呢？注：本文中使用的vue版本為3.4.19。
看個(gè)簡(jiǎn)單的demo，代碼如下：
<template> <p>{{ msg }}</p> <button @click="msg = 'Hello Vue3'">change msg</button></template><script setup lang="ts">import { ref } from "vue";const msg = ref("Hello World");console.log(msg.value);</script>上面的代碼很簡(jiǎn)單，在script中想要訪問(wèn)msg變量的值需要使用msg.value。但是在template中將msg變量渲染到p標(biāo)簽上面時(shí)就是直接使用{{ msg }}，在click的事件處理器中給msg變量賦新的值時(shí)也沒(méi)有使用到.value。
然后在瀏覽器中找到上面這個(gè)vue文件編譯后的樣子，在之前的文章中已經(jīng)講過(guò)很多次如何在瀏覽器中查看編譯后的vue文件，這篇文章就不贅述了。編譯后的代碼如下：
import { Fragment as _Fragment, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, defineComponent as _defineComponent, openBlock as _openBlock, toDisplayString as _toDisplayString, ref,} from "/node_modules/.vite/deps/vue.js?v=23bfe016";const _sfc_main = _defineComponent({ __name: "index", setup() { const msg = ref("Hello World"); console.log(msg.value); const __returned__ = { msg }; return __returned__; },});function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { return ( _openBlock(), _createElementBlock( _Fragment, null, [ _createElementVNode("p", null, _toDisplayString($setup.msg), 1), _createElementVNode( "button", { onClick: _cache[0] || (_cache[0] = ($event) => ($setup.msg = "Hello Vue3")), }, "change msg" ), ], 64 ) );}_sfc_main.render = _sfc_render;export default _sfc_main;vue文件編譯后的代碼主要分為兩塊：_sfc_main和_sfc_render。
在render函數(shù)中讀和寫(xiě)msg變量都變成了$setup.msg，而這個(gè)$setup對(duì)象又是調(diào)用render函數(shù)時(shí)傳入的第四個(gè)參數(shù)。現(xiàn)在我們需要搞清楚調(diào)用render函數(shù)時(shí)傳入的第四個(gè)參數(shù)到底是什么？給render函數(shù)打一個(gè)斷點(diǎn)，刷新頁(yè)面，此時(shí)代碼走到了斷點(diǎn)里面，如下圖：
圖片
右邊的Call Stack表示當(dāng)前函數(shù)的調(diào)用鏈，從調(diào)用鏈中可以看到render函數(shù)是由一個(gè)名為renderComponentRoot的函數(shù)調(diào)用的。
點(diǎn)擊Call Stack中的renderComponentRoot，代碼會(huì)跳轉(zhuǎn)到renderComponentRoot函數(shù)中，在我們這個(gè)場(chǎng)景中簡(jiǎn)化后的renderComponentRoot函數(shù)代碼如下：
function renderComponentRoot(instance) { const { props, data, setupState, render: render2, // 省略... } = instance; render2.call( thisProxy, proxyToUse, renderCache, props, setupState, data, ctx );}這里的render2也就是我們的render函數(shù)，由于使用了.call，所以調(diào)用render函數(shù)時(shí)傳入的第四個(gè)參數(shù)為setupState對(duì)象。而setupState對(duì)象的值又是從instance.setupState而來(lái)的。
通過(guò)debug調(diào)試render函數(shù)我們發(fā)現(xiàn)，在render函數(shù)中渲染msg變量是使用$setup.msg，而$setup對(duì)象的值是從instance.setupState對(duì)象上面來(lái)的。
前面講過(guò)了編譯后的setup方法會(huì)返回一個(gè)包含msg屬性的對(duì)象，而這個(gè)$setup對(duì)象也就是instance.setupState肯定是和setup方法返回的對(duì)象有關(guān)系的。所以接下來(lái)我們需要去debug調(diào)試setup方法搞清楚他們到底是什么關(guān)系。
將render函數(shù)中的斷點(diǎn)去掉，然后給setup方法打一個(gè)斷點(diǎn)。刷新頁(yè)面，此時(shí)代碼會(huì)走到斷點(diǎn)中，如下圖：
同理在Call Stack中可以看到調(diào)用setup方法的是callWithErrorHandling函數(shù)，點(diǎn)擊Call Stack中的callWithErrorHandling，代碼會(huì)跳轉(zhuǎn)到callWithErrorHandling函數(shù)中。代碼如下：
function callWithErrorHandling(fn, instance, type, args) { try { return args ? fn(...args) : fn(); } catch (err) { handleError(err, instance, type); }}從上面可以看到在callWithErrorHandling函數(shù)中只是進(jìn)行了錯(cuò)誤處理，并不是我們想要找的。
從Call Stack中可以看到調(diào)用callWithErrorHandling函數(shù)的是setupStatefulComponent函數(shù)，點(diǎn)擊Call Stack中的setupStatefulComponent，代碼會(huì)跳轉(zhuǎn)到setupStatefulComponent函數(shù)中。在我們這個(gè)場(chǎng)景中簡(jiǎn)化后的setupStatefulComponent函數(shù)代碼如下：
function setupStatefulComponent(instance) { const Component = instance.type; const { setup } = Component; const setupResult = callWithErrorHandling(setup, instance); handleSetupResult(instance, setupResult);}從上面的代碼可以看到確實(shí)是使用callWithErrorHandling函數(shù)執(zhí)行了setup方法，并且還將setup方法的返回值對(duì)象賦值給了setupResult變量。然后以instance（vue實(shí)例）和setupResult（setup方法的返回值）為參數(shù)，調(diào)用了handleSetupResult函數(shù)。
將斷點(diǎn)走進(jìn)handleSetupResult函數(shù)，在我們這個(gè)場(chǎng)景中簡(jiǎn)化后的handleSetupResult函數(shù)代碼如下：
function handleSetupResult(instance, setupResult) { instance.setupState = proxyRefs(setupResult);}我們?cè)趓ender函數(shù)中渲染msg變量是使用$setup.msg，而$setup對(duì)象的值是從instance.setupState對(duì)象上面來(lái)的。
現(xiàn)在我們已經(jīng)找到了instance.setupState是在這里賦值的，它的值是proxyRefs函數(shù)的返回結(jié)果。
將斷點(diǎn)走進(jìn)proxyRefs函數(shù)，代碼如下：
function proxyRefs(objectWithRefs) { return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers);}這個(gè)isReactive函數(shù)是vue暴露出來(lái)的一個(gè)API，它的作用是檢查一個(gè)對(duì)象是否是由 reactive() 或 shallowReactive() 創(chuàng)建的代理。
這里的objectWithRefs對(duì)象就是setup方法的返回值對(duì)象，通過(guò)前面我們知道setup方法的返回值對(duì)象就是一個(gè)普通的js對(duì)象，并不是reactive的。所以proxyRefs函數(shù)會(huì)返回三目運(yùn)算符冒號(hào)（:）后面的表達(dá)式，也就是使用Proxy創(chuàng)建的setup方法返回值對(duì)象代理。
我們接著來(lái)看shallowUnwrapHandlers里面做了哪些事情，代碼如下：
const shallowUnwrapHandlers = { get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)), set: (target, key, value, receiver) => { const oldValue = target[key]; if (isRef(oldValue) && !isRef(value)) { oldValue.value = value; return true; } else { return Reflect.set(target, key, value, receiver); } },};這個(gè)handler包含get和set方法，會(huì)對(duì)setup的返回值對(duì)象進(jìn)行攔截。
當(dāng)在render函數(shù)中渲染p標(biāo)簽時(shí)會(huì)去讀$setup.msg，就會(huì)走到get的攔截中。在get方法中使用到了Reflect.get方法和unref函數(shù)。
由于我們?cè)赾lick事件中要將msg賦值成'Hello Vue3'字符串，所以在set攔截中拿到的新value為'Hello Vue3'字符串。
接著執(zhí)行if (isRef(oldValue) && !isRef(value))判斷，這里的oldValue前面已經(jīng)講過(guò)了是一個(gè)名為msg的ref變量，所以isRef(oldValue) 為true。value為'Hello Vue3'字符串，所以!isRef(value)也是為true。
代碼就會(huì)走進(jìn)if判斷中執(zhí)行oldValue.value = value，也就是在執(zhí)行msg.value = 'Hello Vue3'。
所以在template中給ref變量賦值無(wú)需使用.value，是因?yàn)樵赑roxy的set攔截中也幫我們自動(dòng)處理了.value。
整個(gè)流程圖如下：
圖片
在vue3的template中使用ref變量無(wú)需使用.value，是因?yàn)橛袀€(gè)Proxy的get攔截，在get攔截中會(huì)自動(dòng)幫我們?nèi)トef變量的.value屬性。
同樣的在template中對(duì)ref變量進(jìn)行賦值也無(wú)需使用.value，也是有個(gè)Proxy的set攔截，在set攔截中會(huì)自動(dòng)幫我們?nèi)ソoref變量的.value屬性進(jìn)行賦值。
本文鏈接：http://m.www897cc.com/showinfo-26-92462-0.html終于搞懂了！原來(lái)Vue3中Template使用Ref無(wú)需.Value是因?yàn)檫@個(gè)
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)