搜尋
首頁web前端Vue.js深入聊聊vue3中的reactive()

深入聊聊vue3中的reactive()

Jan 06, 2023 pm 09:21 PM
javascript前端vue.js

深入聊聊vue3中的reactive()

在vue3的開發中,reactive是提供實作響應式資料的方法。日常開發這個是使用頻率很高的api。這篇文章筆者就來探索其內部運作機制。小白一枚,寫得不好請多見諒。

偵錯版本為3.2.45

  • #什麼是reactive?

    ##reactive是Vue3中提供實作回應式資料的方法.

    在Vue2中響應式資料是透過

    defineProperty來實現的.

    而在Vue3響應式資料是透過ES6的

    Proxy 來實現的

  • reactive注意點

    reactive參數必須是

    物件(json/arr)

    如果給reactive傳遞了其他物件,預設情況下修改物件,介面不會自動更新,如果想更新,可以透過重新賦值的方式。 【相關推薦:

    vuejs影片教學web前端開發

  • #
    <script setup>
    import {reactive} from &#39;vue&#39;
    const data = reactive({ //定义对象
      name:&#39;测试&#39;,
      age:10
    })
    const num = reactive(1)//定义基本数据类型
    console.log(data)//便于定位到调试位置
    </script>
    <template>
    <div>
    <h1 id="nbsp-data-name-nbsp">{{ data.name }}</h1>
    </div>
    </template>
    
    <style scoped></style>
設定斷點

深入聊聊vue3中的reactive()

深入聊聊vue3中的reactive()

深入聊聊vue3中的reactive()

#開始偵錯

接下來我們可以開始偵錯了,設定好斷點後,只要重新重新整理頁面就可以進入偵錯介面。

複雜資料型別我們先偵錯簡單的基本資料型別#1.<pre class='brush:php;toolbar:false;'>/*1.初始进来函数,判断目标对象target是否为只读对象,如果是直接返回*/ function reactive(target) { // if trying to observe a readonly proxy, return the readonly version. if (isReadonly(target)) { return target; } //创建一个reactive对象,五个参数后续会讲解 return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap); } /*2.判断是来判断target是否为只读。*/ function isReadonly(value) { return !!(value &amp;&amp; value[&quot;__v_isReadonly&quot; /* ReactiveFlags.IS_READONLY */]); } /*3.创建一个reactive对象*/ /*createReactiveObject接收五个参数: target被代理的对象, isReadonl是不是只读的, baseHandlers proxy的捕获器, collectionHandlers针对集合的proxy捕获器, proxyMap一个用于缓存proxy的`WeakMap`对象*/ function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) { //如果target不是对象则提示并返回 /*这里会跳转到如下方法 判断是否原始值是否为object类型 const isObject = (val) =&gt; val !== null &amp;&amp; typeof val === &amp;#39;object&amp;#39;; */ if (!isObject(target)) { if ((process.env.NODE_ENV !== &amp;#39;production&amp;#39;)) { console.warn(`value cannot be made reactive: ${String(target)}`); } return target; } // 如果target已经是proxy是代理对象则直接返回. if (target[&quot;__v_raw&quot; /* ReactiveFlags.RAW */] &amp;&amp; !(isReadonly &amp;&amp; target[&quot;__v_isReactive&quot; /* ReactiveFlags.IS_REACTIVE */])) { return target; } // 从proxyMap中获取缓存的proxy对象,如果存在的话,直接返回proxyMap中对应的proxy。否则创建proxy。 const existingProxy = proxyMap.get(target); if (existingProxy) { return existingProxy; } // 并不是任何对象都可以被proxy所代理。这里会通过getTargetType方法来进行判断。 const targetType = getTargetType(target); //当类型值判断出是不能代理的类型则直接返回 if (targetType === 0 /* TargetType.INVALID */) { return target; } //通过使用Proxy函数劫持target对象,返回的结果即为响应式对象了。这里的处理函数会根据target对象不同而不同(这两个函数都是参数传入的): //Object或者Array的处理函数是collectionHandlers; //Map,Set,WeakMap,WeakSet的处理函数是baseHandlers; const proxy = new Proxy(target, targetType === 2 /* TargetType.COLLECTION */ ? collectionHandlers : baseHandlers); proxyMap.set(target, proxy); return proxy; }</pre>getTargetType方法呼叫流程

//1.进入判断如果value有__v_skip属性且为true或对象是可拓展则返回0,否则走类型判断函数
function getTargetType(value) {
//Object.isExtensible() 方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。
    return value["__v_skip" /* ReactiveFlags.SKIP */] || !Object.isExtensible(value)
        ? 0 /* TargetType.INVALID */
        : targetTypeMap(toRawType(value));
}
//2.这里通过Object.prototype.toString.call(obj)来判断数据类型
const toRawType = (value) => {
    // extract "RawType" from strings like "[object RawType]"
    return toTypeString(value).slice(8, -1);
};
const toTypeString = (value) => objectToString.call(value);
//3.这里rawType是为&#39;Object&#39;所以会返回1
function targetTypeMap(rawType) {
    switch (rawType) {
        case &#39;Object&#39;:
        case &#39;Array&#39;:
            return 1 /* TargetType.COMMON */;
        case &#39;Map&#39;:
        case &#39;Set&#39;:
        case &#39;WeakMap&#39;:
        case &#39;WeakSet&#39;:
            return 2 /* TargetType.COLLECTION */;
        default:
            return 0 /* TargetType.INVALID */;//返回0说明除前面的类型外其他都不能被代理,如Date,RegExp,Promise等
    }
}

createReactiveObject方法中

const proxy = new Proxy(target, targetType === 2 /* TargetType.COLLECTION */ ? collectionHandlers : baseHandlers);
這一語句中,第二個參數判斷target是否為Map或Set類型。從而使用不同的handler來進行依賴收集。 在偵錯的檔案
node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
    中,我們從
  • reactive

    函數的createReactiveObject函式呼叫的其中兩個參數mutableHandlers

    mutableCollectionHandlers
  • 開始往上查詢
  • ##mutableHandlers的實作

    const mutableHandlers = {
        get,// 获取值的拦截,访问对象时会触发
        set,// 更新值的拦截,设置对象属性会触发
        deleteProperty,// 删除拦截,删除对象属性会触发
        has,// 绑定访问对象时会拦截,in操作符会触发
        ownKeys// 获取属性key列表
    };
    
    function deleteProperty(target, key) {
        // key是否是target自身的属性
        const hadKey = hasOwn(target, key);
        // 旧值
        const oldValue = target[key];
        // 调用Reflect.deleteProperty从target上删除属性
        const result = Reflect.deleteProperty(target, key);
        // 如果删除成功并且target自身有key,则触发依赖
        if (result && hadKey) {
            trigger(target, "delete" /* TriggerOpTypes.DELETE */, key, undefined, oldValue);
        }
        return result;
    }
    //
    function has(target, key) {
        //检查目标对象是否存在此属性。
        const result = Reflect.has(target, key);
        // key不是symbol类型或不是symbol的内置属性,进行依赖收集
        if (!isSymbol(key) || !builtInSymbols.has(key)) {
            track(target, "has" /* TrackOpTypes.HAS */, key);
        }
        return result;
    }
    /*ownKeys可以拦截以下操作:
    1.Object.keys()
    2.Object.getOwnPropertyNames()
    3.Object.getOwnPropertySymbols()
    4.Reflect.ownKeys()操作*/
    function ownKeys(target) {
        track(target, "iterate" /* TrackOpTypes.ITERATE */, isArray(target) ? &#39;length&#39; : ITERATE_KEY);
        return Reflect.ownKeys(target);
    }
    get

    方法實作
  • const get = /*#__PURE__*/ createGetter();
    /*传递两个参数默认都为false
    isReadonly是否为只读
    shallow是否转换为浅层响应,即Reactive---> shallowReactive,shallowReactive监听了第一层属性的值,一旦发生改变,则更新视图;其他层,虽然值发生了改变,但是视图不会进行更新
    */
    function createGetter(isReadonly = false, shallow = false) {
        return function get(target, key, receiver) {
        //1.是否已被reactive相关api处理过;
            if (key === "__v_isReactive" /* ReactiveFlags.IS_REACTIVE */) {
                return !isReadonly;
            }
         //2.是否被readonly相关api处理过
            else if (key === "__v_isReadonly" /* ReactiveFlags.IS_READONLY */) {
                return isReadonly;
            }
            else if (key === "__v_isShallow" /* ReactiveFlags.IS_SHALLOW */) {
                return shallow;
            }
          //3.检测__v_raw属性
            else if (key === "__v_raw" /* ReactiveFlags.RAW */ &&
                receiver ===
                    (isReadonly
                        ? shallow
                            ? shallowReadonlyMap
                            : readonlyMap
                        : shallow
                            ? shallowReactiveMap
                            : reactiveMap).get(target)) {
                return target;
            }
          //4.如果target是数组,且命中了一些属性,则执行函数方法
            const targetIsArray = isArray(target);
            if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
                return Reflect.get(arrayInstrumentations, key, receiver);
            }
          //5.Reflect获取值
            const res = Reflect.get(target, key, receiver);
          //6.判断是否为特殊的属性值
            if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
                return res;
            }
            if (!isReadonly) {
                track(target, "get" /* TrackOpTypes.GET */, key);
            }
            if (shallow) {
                return res;
            }
          //7.判断是否为ref对象
            if (isRef(res)) {
                // ref unwrapping - skip unwrap for Array + integer key.
                return targetIsArray && isIntegerKey(key) ? res : res.value;
            }
          //8.判断是否为对象
            if (isObject(res)) {
                // Convert returned value into a proxy as well. we do the isObject check
                // here to avoid invalid value warning. Also need to lazy access readonly
                // and reactive here to avoid circular dependency.
                return isReadonly ? readonly(res) : reactive(res);
            }
            return res;
        };
    }
  • 檢測__v_isReactive屬性,如果為true,表示target已經是響應式對象了。

    依序偵測
  • __v_isReadonly
  • __v_isShallow屬性,判斷是否為唯讀和淺層回應,如果是則傳回對應包裝過的target 。 偵測__v_raw屬性,這裡是三元的嵌套,主要判斷原始資料是否為只讀淺層回應,然後在對應的Map裡面尋找是否有該目標對象,如果都為true則說明target已經為響應式物件。 如果target

    是陣列,需要對一些方法(針對
  • includes
  • indexOflastIndexOf

  • push
  • popshiftunshiftsplice)進行特殊處理。並對數組的每個元素執行收集依賴,然後透過Reflect取得數組函數的值。

  • Reflect
  • 取得值。

    判斷是否為特殊的屬性值,symbol

  • __proto__
  • __v_isRef__isVue, 如果是直接回傳前面得到的res,不做後續處理;

    #如果為
  • ref
對象,
target不是陣列的情況下,會自動解包。

如果res

Object,進行深層響應式處理。從這裡就能看出,Proxy

是懶惰式的創建響應式對象,只有訪問對應的

key,才會繼續創建響應式對象,否則不用創建。

set方法實作範例:data.name='2'

const set = /*#__PURE__*/ createSetter();
  //shallow是否转换为浅层响应,默认为false
function createSetter(shallow = false) {
    //1.传递四个参数
    return function set(target, key, value, receiver) {
        let oldValue = target[key];
        //首先获取旧值,如果旧值是ref类型,且新值不是ref类型,则不允许修改
        if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
            return false;
        }
     //2.根据传递的shallow参数,来执行之后的操作
        if (!shallow) {
            if (!isShallow(value) && !isReadonly(value)) {
                oldValue = toRaw(oldValue);
                value = toRaw(value);
            }
            if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
                oldValue.value = value;
                return true;
            }
        }
      //3.检测key是不是target本身的属性
        const hadKey = isArray(target) && isIntegerKey(key)
            ? Number(key) < target.length
            : hasOwn(target, key);
        //利用Reflect.set()来修改值,返回一个Boolean值表明是否成功设置属性
        //Reflect.set(设置属性的目标对象, 设置的属性的名称, 设置的值, 如果遇到 `setter`,`receiver`则为`setter`调用时的`this`值)
        const result = Reflect.set(target, key, value, receiver);
        // 如果目标是原始原型链中的某个元素,则不要触发
        if (target === toRaw(receiver)) {
        //如果不是target本身的属性那么说明执行的是&#39;add&#39;操作,增加属性
            if (!hadKey) {
                trigger(target, "add" /* TriggerOpTypes.ADD */, key, value);
            }
      //4.比较新旧值,是否触发依赖
            else if (hasChanged(value, oldValue)) {
      //5.触发依赖
                trigger(target, "set" /* TriggerOpTypes.SET */, key, value, oldValue);
            }
        }
        return result;
    };
}
1 、以data.name='2'這段程式碼為例,四個參數分別為:

#target:目標物件,即target= {"name": "測試","age": 10}(此處為普通物件)

####key###:修改的對應key,即###key: "name"############value###:修改的值,即###value: "2"############receiver###:目標對象的代理。即###receiver=Proxy {"name": "測試","age": 10}#######

2、shallow为false的时候。

第一个判断:如果新值不是浅层响应式并且不是readonly,新旧值取其对应的原始值。

第二个判断:如果target不是数组并且旧值是ref类型,新值不是ref类型,直接修改oldValue.value为value

3.检测key是不是target本身的属性。这里的hadKey有两个方法,isArray就不解释,就是判断是否为数组

isIntegerKey:判断是不是数字型的字符串key值

//判断参数是否为string类型,是则返回true
const isString = (val) => typeof val === &#39;string&#39;;
//如果参数是string类型并且不是&#39;NaN&#39;,且排除-值(排除负数),然后将 key 转换成数字再隐式转换为字符串,与原 key 对比
const isIntegerKey = (key) => isString(key) &&
    key !== &#39;NaN&#39; &&
    key[0] !== &#39;-&#39; &&
    &#39;&#39; + parseInt(key, 10) === key;

4.比较新旧值,如果新旧值不同,则触发依赖进行更新

hasChanged方法

//Object.is()方法判断两个值是否是相同的值。
const hasChanged = (value, oldValue) => !Object.is(value, oldValue);

5.触发依赖,这里太过复杂,笔者也没搞懂,如果有兴趣的读者可自行去调试

<script setup>
import { reactive } from "vue";
const data = reactive({
  name: "测试",
  age: 10,
});

data.name=&#39;1&#39;//这里并未收集依赖,在处理完 createSetupContext 的上下文后,组件会停止依赖收集,并且开始执行 setup 函数。具体原因有兴趣的读者可以自行去了解
const testClick = ()=>{
  data.name=&#39;test&#39;
}
</script>
<template>
  <div>
    <h1 id="nbsp-data-name-nbsp">{{ data.name }}</h1>
    <el-button @click="testClick">Click</el-button>
  </div>
</template>

<style scoped></style>

基本数据类型

const num = reactive(2)

这里比较简单,在createReactiveObject函数方法里面:

if (!isObject(target)) {
        if ((process.env.NODE_ENV !== &#39;production&#39;)) {
            console.warn(`value cannot be made reactive: ${String(target)}`);
        }
        return target;
    }

深入聊聊vue3中的reactive()

因为判断类型不是对象,所以会在控制台打印出警告,并且直接返回原数据

proxy对象

<script>
const data = reactive({
  name: "测试",
  age: 10,
});
const num = reactive(data)//定义一个已经是响应式对象
</script>

1.调试开始进来reactive函数,然后会经过isReadonly函数,这里跟前面不同的是,target是一个proxy对象,它已经被代理过有set,get等handler。所以在isReadonly函数读取target的时候,target会进行get函数的读取操作。

function reactive(target) {
    // if trying to observe a readonly proxy, return the readonly version.
    if (isReadonly(target)) {
        return target;
    }
    return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
}

2.可以看到get传入的参数有个key="__v_isReadonly",这里的isReadonly返回是false,接下来进入createReactiveObject函数

这里说明下,在本次调试中常见的vue里面定义的私有属性有:

  • __v_skip:是否无效标识,用于跳过监听
  • __v_isReactive:是否已被reactive相关api处理过
  • __v_isReadonly:是否被readonly相关api处理过
  • __v_isShallow:是否为浅层响应式对象
  • __v_raw:当前代理对象的源对象,即target

深入聊聊vue3中的reactive()

3.在createReactiveObject函数中,经过target["__v_isReactive"]的时候会触发target的get函数,这时候get函数传入的参数中key='__v_raw'

    if (target["__v_raw" /* ReactiveFlags.RAW */] &&
        !(isReadonly && target["__v_isReactive" /* ReactiveFlags.IS_REACTIVE */])) {
                return target;
    }

深入聊聊vue3中的reactive()

由上图可知我们检测target即已定义过的proxy对象,被reactiveapi处理过就会有__v_raw私有属性,然后再进行receiver的判断,判断target是否为只读或浅层响应。如果都不是则从缓存proxy的WeakMap对象中获取该元素。最后直接返回target的原始数据(未被proxy代理过)。

最后回到之前的判断,由下图可知,target__v_raw属性存在,isReadonly为false,__v_isReactive的值为true,可以说明reactive函数需要处理的对象是一个被reactiveAPI处理过的对象,然后直接返回该对象的原始数据。

深入聊聊vue3中的reactive()

ref类型

经过ref函数处理,其本质也是一个对象,所以使用reactive函数处理ref类型就跟处理复杂数据类型一样过程。对于ref函数,如果大家有兴趣可以阅读这篇文章vue3——深入了解ref()。有些内容跟这里差不多,也有对此补充,如果觉得不错请各位帮忙点个赞

(开发中应该不会有这种嵌套行为吧,这里只是为了测试多样化)。

<script setup>
import { reactive,ref } from "vue";
const data = reactive({
  name: "测试",
  age: 10,
});
const numRef = ref(1)
const dataRef = ref({
  name: "测试2",
  age: 20,
})
const num = reactive(numRef)
const dataReactive = reactive(dataRef)
console.log(&#39;data&#39;,data)
console.log(&#39;numRef&#39;,numRef)
console.log(&#39;num&#39;,num)
console.log(&#39;dataRef&#39;,dataRef)
console.log(&#39;dataReactive&#39;,dataReactive)
</script>

深入聊聊vue3中的reactive()

Map类型和Set类型

  • Map 类型是键值对的有序列表,而键和值都可以是任意类型。
  • SetMap类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。
<script setup>
import { reactive } from "vue";
const mapData = new Map();
mapData.set(&#39;name&#39;,&#39;张三&#39;)
const setData = new Set([1,2,3,1,1])
console.log(mapData)
console.log(setData)
const mapReactive = reactive(mapData)
console.log(mapReactive)
</script>

深入聊聊vue3中的reactive()

由上图可知Map结构和Set结构使用typeof判断是object,所有流程前面会跟复杂数据类型一样,知道在createReactiveObject函数的getTargetType()函数开始不同。

getTargetType函数里面toRawType()判断数据类型所用方法为Object.prototype.toString.call()

const targetType = getTargetType(target);

function getTargetType(value) {
    return value["__v_skip" /* ReactiveFlags.SKIP */] || !Object.isExtensible(value)
        ? 0 /* TargetType.INVALID */
        : targetTypeMap(toRawType(value));
}

function targetTypeMap(rawType) {//rawType="Map",这里返回值为2
    switch (rawType) {
        case &#39;Object&#39;:
        case &#39;Array&#39;:
            return 1 /* TargetType.COMMON */;
        case &#39;Map&#39;:
        case &#39;Set&#39;:
        case &#39;WeakMap&#39;:
        case &#39;WeakSet&#39;:
            return 2 /* TargetType.COLLECTION */;
        default:
            return 0 /* TargetType.INVALID */;
    }
}

这时候targetType=2,在createReactiveObject的函数中const proxy = new Proxy(target, targetType === 2 /* TargetType.COLLECTION */ ? collectionHandlers : baseHandlers);的三元表达式中可得知,这里的handlercollectionHandlers

网上查找可在reactive函数中return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);这条语句找到,当rawType=1handler是用mutableHandlers,rawType=1时是用mutableCollectionHandlers

mutableCollectionHandlers方法:

const mutableCollectionHandlers = {
    get: /*#__PURE__*/ createInstrumentationGetter(false, false)
};

//解构createInstrumentations
const [mutableInstrumentations, readonlyInstrumentations, shallowInstrumentations, shallowReadonlyInstrumentations] = /* #__PURE__*/ createInstrumentations();
//传入两个参数,是否为可读,是否为浅层响应
function createInstrumentationGetter(isReadonly, shallow) {
    const instrumentations = shallow
        ? isReadonly
            ? shallowReadonlyInstrumentations
            : shallowInstrumentations
        : isReadonly
            ? readonlyInstrumentations
            : mutableInstrumentations;
    return (target, key, receiver) => {
        if (key === "__v_isReactive" /* ReactiveFlags.IS_REACTIVE */) {
            return !isReadonly;
        }
        else if (key === "__v_isReadonly" /* ReactiveFlags.IS_READONLY */) {
            return isReadonly;
        }
        else if (key === "__v_raw" /* ReactiveFlags.RAW */) {
            return target;
        }
        return Reflect.get(hasOwn(instrumentations, key) && key in target
            ? instrumentations
            : target, key, receiver);
    };
}
//篇幅问题以及这方面笔者并未深入,所以就大概带过
function createInstrumentations() {
//创建了四个对象,对象内部有很多方法,其他去掉了,完整可自行去调试查看
    const mutableInstrumentations = {
        get(key) {
            return get$1(this, key);
        },
        get size() {
            return size(this);
        },
        has: has$1,
        add,
        set: set$1,
        delete: deleteEntry,
        clear,
        forEach: createForEach(false, false)
    };
    
    .................
    
    //通过createIterableMethod方法操作keys、values、entries、Symbol.iterator迭代器方法
    const iteratorMethods = [&#39;keys&#39;, &#39;values&#39;, &#39;entries&#39;, Symbol.iterator];
    iteratorMethods.forEach(method => {
        mutableInstrumentations[method] = createIterableMethod(method, false, false);
        readonlyInstrumentations[method] = createIterableMethod(method, true, false);
        shallowInstrumentations[method] = createIterableMethod(method, false, true);
        shallowReadonlyInstrumentations[method] = createIterableMethod(method, true, true);
    });
    return [
        mutableInstrumentations,
        readonlyInstrumentations,
        shallowInstrumentations,
        shallowReadonlyInstrumentations
    ];
}

后续比较复杂,加上笔者技术力还不够,如果想继续深入的读者,可以阅读这篇文章:Vue3响应式原理

总结:关于reactive的源码调试就到这了,这只是其中一小部分的源码,希望有兴趣的读者可以以此深入,输出文章,共同进步成长。最后,如果这篇文章对你有所收获,请点个赞,如果有写的不对的地方,请大佬们指出(* ̄︶ ̄)。

(学习视频分享:vuejs入门教程编程基础视频

以上是深入聊聊vue3中的reactive()的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
React和Netflix:探索關係React和Netflix:探索關係Apr 26, 2025 am 12:11 AM

Netflix使用React來提升用戶體驗。 1)React的組件化特性幫助Netflix將復雜UI拆分成可管理模塊。 2)虛擬DOM優化了UI更新,提高了性能。 3)結合Redux和GraphQL,Netflix高效管理應用狀態和數據流動。

vue.js vs.後端框架:澄清區別vue.js vs.後端框架:澄清區別Apr 25, 2025 am 12:05 AM

Vue.js是前端框架,後端框架用於處理服務器端邏輯。 1)Vue.js專注於構建用戶界面,通過組件化和響應式數據綁定簡化開發。 2)後端框架如Express、Django處理HTTP請求、數據庫操作和業務邏輯,運行在服務器上。

vue.js和前端堆棧:了解連接vue.js和前端堆棧:了解連接Apr 24, 2025 am 12:19 AM

Vue.js與前端技術棧緊密集成,提升開發效率和用戶體驗。 1)構建工具:與Webpack、Rollup集成,實現模塊化開發。 2)狀態管理:與Vuex集成,管理複雜應用狀態。 3)路由:與VueRouter集成,實現單頁面應用路由。 4)CSS預處理器:支持Sass、Less,提升樣式開發效率。

Netflix:探索React(或其他框架)的使用Netflix:探索React(或其他框架)的使用Apr 23, 2025 am 12:02 AM

Netflix選擇React來構建其用戶界面,因為React的組件化設計和虛擬DOM機制能夠高效處理複雜界面和頻繁更新。 1)組件化設計讓Netflix將界面分解成可管理的小組件,提高了開發效率和代碼可維護性。 2)虛擬DOM機制通過最小化DOM操作,確保了Netflix用戶界面的流暢性和高性能。

vue.js和前端:深入研究框架vue.js和前端:深入研究框架Apr 22, 2025 am 12:04 AM

Vue.js被開發者喜愛因為它易於上手且功能強大。 1)其響應式數據綁定係統自動更新視圖。 2)組件系統提高了代碼的可重用性和可維護性。 3)計算屬性和偵聽器增強了代碼的可讀性和性能。 4)使用VueDevtools和檢查控制台錯誤是常見的調試技巧。 5)性能優化包括使用key屬性、計算屬性和keep-alive組件。 6)最佳實踐包括清晰的組件命名、使用單文件組件和合理使用生命週期鉤子。

vue.js在前端的力量:關鍵特徵和好處vue.js在前端的力量:關鍵特徵和好處Apr 21, 2025 am 12:07 AM

Vue.js是一個漸進式的JavaScript框架,適用於構建高效、可維護的前端應用。其關鍵特性包括:1.響應式數據綁定,2.組件化開發,3.虛擬DOM。通過這些特性,Vue.js簡化了開發過程,提高了應用性能和可維護性,使其在現代Web開發中備受歡迎。

vue.js比反應好嗎?vue.js比反應好嗎?Apr 20, 2025 am 12:05 AM

Vue.js和React各有優劣,選擇取決於項目需求和團隊情況。 1)Vue.js適合小型項目和初學者,因其簡潔和易上手;2)React適用於大型項目和復雜UI,因其豐富的生態系統和組件化設計。

vue.js的功能:增強前端的用戶體驗vue.js的功能:增強前端的用戶體驗Apr 19, 2025 am 12:13 AM

Vue.js通過多種功能提升用戶體驗:1.響應式系統實現數據即時反饋;2.組件化開發提高代碼復用性;3.VueRouter提供平滑導航;4.動態數據綁定和過渡動畫增強交互效果;5.錯誤處理機制確保用戶反饋;6.性能優化和最佳實踐提升應用性能。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具