初识VUE_白灵一博客-CSDN博客

本文链接：https://blog.csdn.net/m0_70190404/article/details/125189388

Vue 是一套用于构建用户界面的渐进式（用到的才会导入）的JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图（M V VM 中的V，其中vm 在vue框架的底层就实现了）层，易于上手。

vue简介 1.框架 2.简化dom操作 3.响应式数据驱动

一、第一个vue

添加对象属性：Object.defineProperty()

一、第一个vue

搭建VScode开发vue环境可看该链接视频[教程] vue开发环境搭建(vue+cnpm配置+nodejs+vscode插件推荐)_哔哩哔哩_bilibili

1.安装vue（引入vue）

（1）内容较全面适合新手

（2）速度快

2.HTML中创建VUE实例对象

<div id="app"> {{ message }} </div>

3.JS中声明式的将数据渲染进DOM系统

设置挂载点和数据对象的两种方法

方法一、都在对象里面

var appv = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

el属性：设置挂载点（用于设置Vue实例管理/挂载的元素）

data属性：数据对象

methods属性：设置方法

方法二、挂载点写在对象外面，data写在对象里面由对象式变为函数式

appv.$mount('#app');

data: function() {

return{

message: 'Hello Vue!'

}

对象里面写方法，不用function

data() {

return{
console.log(this)
// 这里的this指的是vue 实例对象

message: 'Hello Vue!'

}

}

附:

添加对象属性：Object.defineProperty()

二、计算属性，监视属性、深度监视

一、计算属性

1、vue中属性指的是data里面的变量，

2、计算属性 showxmfun ，在vue 对象里面通过computed方法计算得到的属性

            computed: {
                showxmfun: {
                    get() {
                        return this.showx + ' - ' + this.showm;
                    },
                    set(value) {
                        var arr = value.split('-');
                        this.showx = arr[0];
                        this.showm = arr[1];
                    }
                }
            }

直接调用计算属性中的 showxmfun ，其实是调用的是showxmfun 中的get方法

        <span class="xing-ming">{{showxmfun}}</span>

用赋值的方法来改变showxmfun 中值的内容，本质是调用了set（）方法，但是不可以用调用方法的形式写

  <span class="xing-ming" >{{showxmfun="张-三"}}</span>

计算属性简写：

            computed: {
                // 里面只有get() 功能，不可以更改
                showxmfun: function () {
                    return this.showx + ' - ' + this.showm;
                }
            }

二、监视属性

监听属性有两种使用的方法：

1、写在实例化属性里面

// 监听属性
            watch: {
                // 这里 info 本来是要加''的，为了简化才去掉的 'info'
                info: {
                    // 初始化时让handler 调用一次,此时oldValue 没有被定义
                    immediate: true,

                    // handler 在 info 发生改变时自动调用
                    handler(newValue, oldValue) {
                        console.log('info 修改了,现在: ', newValue, "现在：", oldValue);
                    }
                }
            },

2、写在实例化属性外面

 vm.$watch('info', {

            // 初始化时让handler 调用一次,此时oldValue 没有被定义
            immediate: true,

            // handler 在 info 发生改变时自动调用
            handler(newValue, oldValue) {
                console.log('info 修改了,现在: ', newValue, "现在：", oldValue);
            }
            
        })

例题：

<!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>监视属性</title>

    <script src="./js/vue.js"></script>

</head>

<body>
    <div id="app">
        <h1>今天天气{{info}}</h1>
        <button @click="changeWea">切换</button>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                ishot: "true",
            },
            methods: {
                changeWea: function () {
                    this.ishot = !this.ishot;
                }
            },
            computed: {
                info() {
                    return this.ishot ? "炎热" : "凉爽";
                }
            },
            // 监听属性
            watch: {
                // 这里 info 本来是要加''的，为了简化才去掉的 'info'
                info: {
                    // 初始化时让handler 调用一次,此时oldValue 没有被定义
                    immediate: true,

                    // handler 在 info 发生改变时自动调用
                    handler(newValue, oldValue) {
                        console.log('info 修改了,现在: ', newValue, "现在：", oldValue);
                    }
                }
            },
        })

        // vm.$watch('info', {

        //     // 初始化时让handler 调用一次,此时oldValue 没有被定义
        //     immediate: true,

        //     // handler 在 info 发生改变时自动调用
        //     handler(newValue, oldValue) {
        //         console.log('info 修改了,现在: ', newValue, "现在：", oldValue);
        //     }
        // })
    </script>
</body>

</html>

Vue 监视数据原理

数据劫持

数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比如Object.defineProperty () 中有数据变化时 set()方法会劫持要改变的数据，并修改原来要更改的数据

比较典型的是 Object.defineProperty () 和 ES2015 中新增的 Proxy 对象。数据劫持最著名的应用当属双向绑定，这也是一个已经被讨论烂了的面试必考题。例如 Vue 2.x 使用的是 Object.defineProperty () (Vue 在 3.x 版本之后改用 Proxy 进行实现)。

三、深度监视

（一）、

（1）、

 watch: {

                // 此时检测到的是 number 的地址， 不能检测到a,b 他俩
                number:{
                    handler() {
                        console.log('number 变化了');
                    },
                },

            },

 watch: {
              // 只能检测到a ，并且此时的 '' 不可以省略
                'number.a':{
                    handler() {
                        console.log('a 变化了');
                    },
                }

            },

（2）、

 watch: {

                // 深度检测
                number:{
                    deep:true,//默认为 false
                    handler() {
                        console.log('number deep 变化了');
                    },
                }

            },

备注：

（1）、 vue 默认是可以检测多层级的内部值的，但是提供给程序员的watch 不能自动的检测，需要增加 deep。

 watch: {

                // 此时检测到的是 number 的地址， 不能检测到a,b 他俩
                number:{
                    handler() {
                        console.log('number 变化了');
                    },
                },

            },

（2）、因为 watch 中增加了 deep 后，效率会降低。所以默认为 false。

<!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>监视属性</title>

    <script src="./js/vue.js"></script>

</head>

<body>
    <div id="app">
        <h1>今天天气{{info}}</h1>
        <button @click="changeWea">切换</button><br>

        <h1>数字a：{{number.a}}</h1>
        <button @click="changeNuma">切换a</button><br>

        <h1>数字b：{{number.b}}</h1>
        <button @click="changeNumb">切换b</button><br>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                ishot: "true",
                number:{
                    a:1,
                    b:2
                }
            },
            methods: {
                changeWea: function () {
                    this.ishot = !this.ishot;
                },
                changeNuma: function() {
                    this.number.a ++;
                },
                changeNumb:function () {
                    this.number.b ++;
                }
            },
            computed: {
                info() {
                    return this.ishot ? "炎热" : "凉爽";
                }
            },
            // 监听属性
            watch: {
                // 这里 info 本来是要加''的，为了简化才去掉的 'info'
                info: {
                    // 初始化时让handler 调用一次,此时oldValue 没有被定义
                    immediate: true,

                    // handler 在 info 发生改变时自动调用
                    handler(newValue, oldValue) {
                        console.log('info 修改了,现在: ', newValue, "现在：", oldValue);
                    }
                },
            
                // 只能检测到a ，并且此时的 '' 不可以省略
                'number.a':{
                    handler() {
                        console.log('a 变化了');
                    },
                },
                // 此时检测到的是 number 的地址， 不能检测到a,b 他俩
                number:{
                    handler() {
                        console.log('number 变化了');
                    },
                },
                // // 深度检测
                // number:{
                //     deep:true,//默认为 false
                //     handler() {
                //         console.log('number deep 变化了');
                //     },
                // },

            },


        })

        // vm.$watch('info', {

        //     // 初始化时让handler 调用一次,此时oldValue 没有被定义
        //     immediate: true,

        //     // handler 在 info 发生改变时自动调用
        //     handler(newValue, oldValue) {
        //         console.log('info 修改了,现在: ', newValue, "现在：", oldValue);
        //     }
        // })
    </script>
</body>

</html>

（二）、简写方式

简写方式，不可以增加 immediate: true, 和 deep:true, 时：

（1）、对象体里面

               info(newValue, oldValue){
                    console.log('简写  ---info 修改了,现在: ', newValue, "现在：", oldValue);
                },

（2）、对象体外面

vm.$watch('info', function(newValue, oldValue){
                console.log('info 修改了,现在: ', newValue, "现在：", oldValue);
        })

初识VUE

一、第一个vue

添加对象属性：Object.defineProperty()

二、计算属性，监视属性、深度监视

一、计算属性

二、监视属性

Vue 监视 数据原理

数据劫持

三、深度监视

（一）、

（二）、简写方式

（三）、计算属性 和 监视（侦听） 属性 的区别

Vue 监视数据原理

（三）、计算属性和监视（侦听）属性的区别