vue学习 --- vue的响应式1

最新推荐文章于 2024-08-30 20:29:15 发布

相见啊

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量127

点赞数

文章标签： vue.js javascript es6

本文链接：https://blog.csdn.net/qq_41962068/article/details/108725426

版权

	<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Ricardo
 * @Date: 2020-09-21 15:39:58
 * @LastEditors: Seven
 * @LastEditTime: 2020-09-22 10:12:38
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        {{ msg }},
        {{ student.name }}
    </div>

    <!-- 渲染
        
        发生改变时 会重新在加载数据
        未使用 的 渲染页面 操作dom  会耗费性能 优化条件的减少dom的操作

        更改数据后  页面不会立即重新渲染页面 

        页面渲染的操作是异步执行
        同步执行栈，异步队列（宏任务 ， 微任务  event loop事件环）
            异步队列 --执行顺序也就是  微任务 ---  》宏任务
    -->

    <script src="../vue.js"></script>
    <script type="text/javascript">
        // 需要暴露属性和方法  放在原型链上 构造函数的this  
        function Ceshi(config) {
            // const this={};
            // config= {data:{"键值对"}}

            this.data = config.data
            // return this


            for (let key in config.data) {
                this[data] = config.data[key]
            }

        }

        /*
            vue data在 vm对象的实例对象上  例如 vm.xxx 获取对象上的属性
            
            响应式  是 监控对象  实时监测
                监测数据变化  
                object={attrs {}}
                vue 中数据监测对象太多
                Object.defineProperty 数据劫持  解决数据监测  监听对象  
            
            -------$data  ------  _data-----  
            前者暴露给开发者  使用的数据
            后者 则是 vue内部使使用的数据   
            
            未经声明的属性 不会报错
            

            

        */

        const vm = new Vue({
            el: "#app",
            data: {
                msg: "插值的内容",
                student: {
                    name: "name1",
                    age: 12,

                }

            }
        });

        vm.msg = "已修改的name"


        const vh = new Vue({
            el: "#app",
            data: {
                msg: "插值的内容",
                student: {
                    name: "name1",
                    age: 12,

                }

            }
        });


        console.log(vm.msg);
        // 使用vm.$nextTick()
        vm.$nextTick(() => {
            // callback
            console.log(vh.$el.innerHTML);
        });

        // 使用Vue.nextTick(()=>{})

        Vue.nextTick(() => {
            console.log(vh.$el.innerHTML);
        });
        /*
            Vue.nextTick()
            内部函数 this指向window
        */

        Vue.nextTick(function () {
            console.log(this); // window
        });

        //  this.$nextTick(callback)

        vm.$nextTick(function () {
            console.log(this); // vm实例    
        });



        // this.$nextTick(callback)的实现
        /*
            异步执行任务我 分为  宏任务macro   和  微任务micro
                宏任务 执行时间慢，例如settimeout  
                微任务快例如promise  then()

                微任务在前，宏任务在后

        */

        // promise > timeout
        setTimeout(() => {
            console.log("timeout");
        }, 0);

        Promise.resolve().then(()=>{
            console.log("这是 promise ");
        });

        // 在nextTick的实现源码中，会先判断是否支持微任务，不支持后，才会执行宏任务
        if (typeof promise !== "undefined") {
            // 判断 浏览器引擎中 是否有promise 
            // IE 不支持 promise 
                const p = promise.resolve();
        }else if (typeof MutationObserver !== "undefined") {
            // 微任务   突变观察 监听文档的中的文字的变化，如果文字有变化会执行回调函数
        } else if(typeof setImmediate !=="undefined"){
            // 宏任务 
        } else{
             // 宏任务
                // 如果上面都不能执行，那么则会调用setTimeout
        }

    </script>
</body>

</html>
	```

相见啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习 --- vue的响应式1

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .
复制链接

扫一扫