class04：Vue3的底层

最新推荐文章于 2024-05-30 11:27:58 发布

Laker 23

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量263

点赞数

分类专栏： # Vue框架文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_51667621/article/details/129470208

版权

Vue框架专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、Vue3的底层

Vue3底层使用TypeScript，使用proxy 数据代理。

1. Vue3实例的返回对象

let data = {
    name:"Evan You",
    age:"36",
    sex:"男"
}

let vm = new Proxy(data, {
    get(target, handler){
        console.log(arguments);
    },
    set(){

    }
})

let vm = new Proxy(data, {
    get(target, handler){
        console.log(target, handler)
        return target[handler]
    },
    set(){

    }
})

2. 扩展

扩展1：属性删除

let data = {
    name:"Evan You",
    age:"36",
    sex:"男"
}

let vm = new Proxy(data, {
    get(target, handler){
        console.log(arguments);
        console.log(target, handler);
        return target[handler];
    },
    set(target, handler, value){
        target[handler] = value;
    },
    // 属性删除
    deleteProperty(target, handler){
        return delete target[handler]
    }
})

扩展2：反射（封装方法，统一返回）

let _data = new Proxy(data, {
    get(target, handler) {
        return Reflect.get(target,handler)
    },
    set(target, handler, value) {
        Reflect.set(target,handler, value)
    },
    // 属性删除
    deleteProperty(target, handler) {
        return Reflect.deleteProperty(target,handler)
    }
})

二、指令

指令作用：标签的属性 => 用于给标签指定功能。如：v-bind 单向绑定数据、v-model 双向绑定数据(表单)、v-html 重写节点内容。

1. v-show和v-if 隐藏/显示

文档说明：条件渲染 — Vue.js (vuejs.org)

a. v-show

v-show => 隐藏/显示 => 简单的切换 display ，不删除元素。(display = block/none)

写法：v-show = “表达式”; 表达式的返回值最好是布尔值

例：页面用v-show = "bol"显示”个人信息”，当bol为true则显示，当bol为false则隐藏。

<div id="root">
    <p v-show = "bol">个人信息</p>
</div>
<script>
    let vm = new Vue({
        el: "#root",
        data(){
            return {
                name:"尤雨溪",
                age:"36",
                sex:"男",
                bol:false
            }
        }
    })
</script>

使用vue调试工具查看效果：

b. v-if

v-if => 隐藏/显示 => 开始为 false 直接不渲染 => true 渲染；使用中 false 直接干掉 => true 重新创建插入进去

写法：v-if = “表达式”;

例：

<div v-if="bol">使用v-if</div>

v-if显示/隐藏的原理：

开始：为 false 直接不渲染，变为 true则渲染；

使用中：false 直接删掉节点，变为 true 重新创建插入进去。

v-else-if=“表达式”； 或 v-else =“表达式”； 配合v-if使用。

例：

<div v-if="num">00000 v-if</div> // 表达式num已固定，除非num的bol值改变，否则不会执行后面程序
<div v-else-if="num == 1">11111 v-else-if</div>
<div v-else-if="num == 2">22222 v-else-if</div>
<div v-else="num == 3">33333 v-else</div>

**注意：**v-if、v-else-if、v-else 三者一起使用时，中间不能被插入其他内容。

c. template

template标签本身不会被渲染到页面中，只有它里面的内容会渲染，相当于占据了书写位置，不占据实际的dom位置。

便于一次性处理多个内容。

例：

<template v-if="bol">
    <div>尤雨溪</div>
    <div>Evan You</div>
    <div>男</div>
    <div>36</div>           
    <div>汉</div>
    <div>Colgate University</div>
    <div>前端框架Vue.js的作者</div>
    <div>HTML5版Clear的打造人</div>
    <div>独立开源开发者</div>
</template>

总结:

v-show：简单的切换 display显示隐藏，可以获取到元素节点，用于切换频率高的场景，Vue3 template 不支持使用v-show ；

v-if：创建和销毁进行隐藏显示，和v-else-if 、v-else一起使用时结构不能打断，不能获取元素节点，用于切换频率低场景；

v-else：特点: 不展示的dom直接销毁；

2. v-bind绑定属性

文档说明：Class 与 Style 绑定 — Vue.js (vuejs.org)

v-bind：动态绑定。在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

a. 动态绑定class

例：

<div id="root">	
    <!-- 动态绑定：常用 -->
	<div :class="arg">Hello Vue</div>
    <div v-bind:class="arg">HUAWEI</div>

    <!-- 多个类名的情况 -->
    <!-- 原生+动态 -->
    <div class="xiaomi" :class="arg">XIAOMI</div>
    <!-- 原生写法 -->
    <div class="xiaomi oppo">OPPO</div> 

    <!-- vue动态写法 -->
    <!-- 动态数组：可更改数组内容 => 适用类名、样式都不确定的情况 -->
    <div :class="arr">xiaomi,oppo,vivo</div>
    <!-- 对象写法： -->
    <div :class="{glo:bol}">xiaomi,oppo,vivo,MEIZU</div> <!--单个 -->
    <div :class="obj">xiaomi,oppo,vivo,MEIZU</div>	<!--多个 -->
</div>
<script>
	let vm = new Vue({
        el: "#root",
        data(){
            return {
                bol:true,
                global:"glo",
                arg:"sty",
                arr:["xiaomi","oppo","vivo"],              
                obj:{
                    // 属性名只能用css样式中的类名，不能用data中的属性名
                    glo:false,
                    sty:true,
                    xiaomi:true,
                    vivo:true,
                },
            }
        }
    })
</script>

样式表：

<style>
    .sty{
        background-color: blueviolet;
    }
    .xiaomi{
        color: brown;
    }
    .oppo{
        font-weight: bold;
    }
    .vivo{
        font-size: larger;
    }
    .size{
        font-size: 50px;
    }
    .glo{
        background-color: blue;
    }
</style>

效果展示：

动态数组写法效果演示：

b. 动态绑定style

例：

<div id="root">
    <!-- 原生写法 -->
    <div style="color: aquamarine;">原生写法</div>
    <!-- 动态绑定style -->
    <div :style="arg">动态绑定style</div>
    <!-- 动态绑定多个style -->
    <div :style="{fontSize:fontSize + 'px', color:fontColor}">动态绑定多个style</div>
    <!-- 对象写法 -->
    <div :style="obj">对象写法</div>
    <!-- 数组写法 -->
    <div :style="[obj, mov]">数组写法</div>
</div>
<script>
    let vm = new Vue({
        el: "#root",
        data(){
            return {
                arg:"color:red",
                fontSize:50,
                fontColor:"green",
                obj:{
                    backgroundColor:"blueviolet",
                    fontSize:"20px",
                    color:"orange"
                },
                mov:{
                    fontStyle:"italic",
                }
            }
        }
    })
</script>

注意：data()中的属性名和div中绑定style样式的属性名都不能用-作为命名方式，推荐使用小驼峰命名法。style后面的属性名可以自定义，但是最好见名知义，vue会根据属性值判断style样式的渲染。如 :style=“{fontSize:fontSize + ‘px’}”，vue会自动判断为字体大小；但是如果有多种颜色则只渲染命名规范的样式，如 :style=“{color:fontColor, backgroundColor:bg}”，当属性名color、backgroundColor为自定义的任意字符abcd等，则都不渲染，若颜色只有一种样式且属性名为任意字符，则默认渲染为字体颜色。