No.2 Vue2.0——Vue的基础说明

最新推荐文章于 2024-09-24 10:50:41 发布

jule_zhou

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量275

点赞数

分类专栏： # Vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/jule_zhou/article/details/128234865

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

本文详细介绍了MVVM模型，重点探讨了JavaScript的defineProperty方法，包括如何设置不可枚举、不可删除和不可修改的属性，以及setter和getter的使用。接着，文章阐述了Vue中的数据代理机制，展示了如何通过数据代理实现属性的读写操作，并通过实例解释了Vue如何通过getter和setter实时更新视图。最后，总结了Vue数据代理的优势及其基本原理。

摘要由CSDN通过智能技术生成

一、前景提要

在No.1 初步认识Vue2.0中已经完成了一下几点：

Vue2.0的下载安装以及引入
Vue中的{{ }}绑定
表单的绑定事件：双向/单向绑定
el与data的几种书写方式

二、MVVM模型简述

M：模型model，对应data中的数据，对应Vue中的数据，（Plain JavaScript Object）
V：视图view，模板（dom）
VM：视图模型viewModel：Vue对象

MVVM模型

三、回顾defineproperty方法

3.1 不可枚举、不可删除、不可修改属性的介绍及更改

<script>
    let person = {
        name : "张三",
        sex : "男",
    }
    // 通过defineProperty方法向person中添加age属性
    Object.defineProperty(person,'age',{
        value:18
    })
    // 遍历出可以枚举的属性
    // 方法一
    console.log(Object.keys(person))
    // 方法二
    for(let key in person){
        console.log(person[key])
    }
    // 输出person的内容
    console.log(person)
</script>

输出结果
不可枚举案例
想要可以枚举的办法：添加属性


// 通过defineProperty方法向person中添加age属性
Object.defineProperty(person,'age',{
    value:18,
    enumerable:true,    // 控制属性是否可以枚举，默认是false
    writable:true,  // 控制属性是否可以被修改，默认是false
    configurable:true,   //控制属性是否可以被删除，默认是false
})
// 遍历出可以枚举的属性

3.2 setter函数的使用

<script>
    let number = 18;
    let person = {
        name : "张三",
        sex : "男",
    }
    // 通过defineProperty方法向person中添加age属性
    Object.defineProperty(person,'age',{
        // 当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
        get:function(){
        	// console.log("有人调用person中的key")
            return number
        }
    })
    // 遍历出可以枚举的属性
    // 方法一
    console.log(Object.keys(person))
    // 方法二
    for(let key in person){
        console.log(person[key])
    }
    // 输出person的内容
    console.log(person)
</script>

控制台输出效果此时修改number的值时，将会同步修改person中的age的属性值，且修改person中的age时将不会生效

调用age的顺序图简写：

<script>
    let number = 18;
    let person = {
        name : "张三",
        sex : "男",
    }
    // 通过defineProperty方法向person中添加age属性
    Object.defineProperty(person,'age',{
        // 当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
        get(){
            console.log("有人调用person中的key")
            return number
        }
    })
</script>

3.3 getter函数的使用

<script>
    let number = 18;
    let person = {
        name : "张三",
        sex : "男",
    }
    // 通过defineProperty方法向person中添加age属性
    Object.defineProperty(person,'age',{
        // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就
        get(){
            console.log("有人调用person中的key")
            return number
        },
        // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修
        set(value){
            console.log("有人修改了age属性，值为",value)
        }
    })
    // 遍历出可以枚举的属性
    // 方法一
    console.log(Object.keys(person))
    // 方法二
    for(let key in person){
        console.log(person[key])
    }
    // 输出person的内容
    console.log(person)
</script>

setter函数的使用如果想要改变，可以让number进行改变

<script>
    let number = 18;
    let person = {
        name : "张三",
        sex : "男",
    }
    // 通过defineProperty方法向person中添加age属性
    Object.defineProperty(person,'age',{
        // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get(){
            console.log("有人调用person中的key")
            return number
        },
        // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的值
        set(value){
            console.log("有人修改了age属性，值为",value)
            number = value
        }
    })
</script>

四、数据代理

4.1 何为数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

<script>
    let obj = {
        x:100
    }
    let obj2 = {y:200}
    // 通过defineProperty方法向person中添加age属性
    Object.defineProperty(obj2,'x',{
        // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get(){
            console.log("有人调用obj中的x")
            return obj.x
        },
        // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的值
        set(value){
            console.log("有人修改了obj2中的x属性，值为",value)
            obj.x = value
        }
    })
    // 遍历出可以枚举的属性
    // 方法一
    console.log(Object.keys(obj2))
    // 方法二
    for(let key in obj2){
        console.log(obj2[key])
    }
    // 输出person的内容
    console.log(obj2)
</script>

简单的代理说明

4.2 Vue中的数据代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的数据代理</title>
    
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <!-- 创建一个容器 -->
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>

    <script>
        // 阻止vue产生生产提示
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:'#root',
            data:{
                name : "爱我中华！",
                address : "中国"
            }
        })
    </script>
</body>
</html>