vue和webpack的一点点了解

最新推荐文章于 2024-04-10 15:45:07 发布

seven-yang

最新推荐文章于 2024-04-10 15:45:07 发布

阅读量4.6k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/yangyixue123/article/details/78536129

版权

官网教程：https://cn.vuejs.org/v2/guide/installation.html

[参考资料]http://mp.weixin.qq.com/s/6Mo5csEDVKMq4-v6Yi8ZPQ)

参考资料

知识点总结

vue的主要作用是当数据发生改变时使用虚拟DOM来更改某一DOM节点，避免将整个页面渲染。

1.关于vue，像他是一种组件化的轻量级框架，它是基于什么前端设计模式的。
vue基于组件化的开发方式，用于构建用户界面的渐进式的js框架，自底层向上逐层应用，

Vue的双向绑定(你可以说这是vue最大的好处)

双向数据绑定是在单向的基础上给可输入元素（input、textare）添加change（input）事件，来动态修改model和view

实现数据绑定的方法：

发布者-订阅者模式（backbone.js）

脏值检查（angular.js） 

数据劫持（vue.js）

MVVM
M - model，指的是模型，也就是数据，V - view，指的是视图，也就是页面展现的部分。通常，我们需要编写代码，将从服务器获取的数据进行“渲染”，展现到视图上。每当数据有变更时，我们会再次进行渲染，从而更新视图，使得视图与数据保持一致。
另一方面，页面也会通过用户的交互，产生状态、数据的变化，这个时候，我们则编写代码，将视图对数据的更新同步到数据，以致于同步到后台服务器。也就是不同的前端 MV* 框架对于这种 Model 和 View 间的数据同步有不同的处理。

VueJS 则使用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

采用数据劫持和发布者-订阅者结合的方式，来做数据绑定，核心是object.defineProperty（），劫持各个属性的getter和setter,在数据模型变化的时候，发布消息给订阅者（绑定了数据模型的DOM元素），触发相应的监听回调。

双向链接

Object.defineProperty(obj, key, options)

直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。

vueJS采用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

有三个参数，全部都是必填的。参数：

obj：目标对象

key：属性或者方法的名字

options：目标属性所拥有的特性

主要解释第三个参数 {

value：属性的值,            

writable：布尔值，规定属性是否可重写, 在值为true的情况下，才能对该值进行重写修改。         

configurable：总开关，以第一次设置为准，一旦是false，则其他属性不可设置,            

enumerbale：决定属性是否可枚举 ，就是能不能被遍历出来。           

get: 是一个函数，返回一个值，会在属性被调用的时候触发。            

set: 是一个函数，接收一个新值，会在值被重写或修改的时候触发这个函数

}
因为如果没有明确的设置其他值，默认都是false。

访问器：（set\get）不能和writable/value同时设置就是会冲突的意思，set和writable都是设置属性值的，所以会冲突而get和value都是获取属性值的，所以也会冲突(可以先这么理解)

//判断是不是对象

function isObj(obj){
   
    var type = Object.prototype.toString.call(obj);
    return type ==='[object Object]'
}

//执行函数

function ObjFun(obj){
   
   if(isObj(obj)){
       new Objserver(obj);
 }
}
function Observer(obj){
   
    this.data = obj;
    this.walk(obj);
}

 //监听事件函数：
Observer.prototype.walk = function(obj){
   
    for(var k in obj){
        def(obj,k,obj[k])
    }
}
function def(obj,k,val){
   
    Object.defineProperty(obj,k,{
        configurable:true,
        enumerable:true,
        get:function(){
   
            console.log('get取值');
            return val;
        },
        set:function(newVal){
   
            if(val === newVal){
                return;
            }
            val = newVal;
            console.log('set设置值')
        }
    });
}

//测试：
var obj = {a:111,b:222};
objFun(obj);
console.log(obj.a)//get取值 222
obj.a = 333;//set设置值
console.log(obj)

装饰者模式
详细解释
在不改变对象自身的基础上，在程序运行期间给对象动态的添加职责

装饰器模式是一种结构型模式，它与对象的创建无关，主要考虑的是如何拓展对象的功能。也就是说，除了使用线性式（父－子－孙）继承方式之外，我们也可以为一个基础对象创建若干个装饰对象以拓展其功能。然后，由我们的程序自行选择不同的装饰器，并按不同的顺序使用它们。在不同的程序中我们可能会面临不同的需求，并从同样的装饰器集合中选择不同的子集。

观察者模式（发布-订阅模式）

观察者模式是一种行为型模式，主要用于处理不同对象
之间的交互通信问题。观察者模式中通常会包含两类对象。

一个或多个发布者对象：当有重要的事情发生时，会通知订阅者。
一个或多个订阅者对象：它们追随一个或多个发布者，监听它们的通知，并作出
相应的反应

总结： 1.指定一个发布者
    2.给发布者添加缓存列表，存放回调函数，通知订阅者
    3.发布信息时，发布者遍历缓存表，触发存放的回调函数

监听器Observer和订阅者Watcher

实现简单版Vue的过程，主要实现{ {}}、v-model和事件指令的功能

监听器Observer

Observer是一个数据监听器，核心是前面一直谈论的Object.defineProperty(),
对所有属性监听，利用递归来遍历所有的属性值，对其进行Object.defineProperty()操作：

实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性

订阅者Watcher

 Watcher将数据监听器和指令解析器连接起来，数据的属性变动时，执行指令绑定的相应回调函数，如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。

Watcher在初始化的时候要将自己添加进订阅者Dep中，如何做到：
已经知道监听器Observer是在get函数执行了添加订阅者Wather的操作的，

所以我们只要在订阅者Watcher初始化的时候触发对应的get函数，去执行添加订阅者操作即可，

那要如何触发get的函数:

只要获取对应的属性值就可以触发了，核心原因就是因为我们使用了Object.defineProperty()进行数据监听。

注意：
我们只要在订阅者Watcher初始化的时候才需要添加订阅者，所以需要做一个判断操作，
因此可以在订阅器上做一下手脚：在Dep.target上缓存下订阅者，添加成功后再将其去掉就可以了。
创建一个watcher.js

指令解析器complie

指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher

Vue对生命周期的理解

生命周期图示

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreated阶段，vue实例的挂载元素 el和数据对象data都为undefine

最低0.47元/天解锁文章

seven-yang

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue和webpack的一点点了解

官网教程：https://cn.vuejs.org/v2/guide/installation.html[参考资料]http://mp.weixin.qq.com/s/6Mo5csEDVKMq4-v6Yi8ZPQ)参考资料知识点总结vue的主要作用是当数据发生改变时使用虚拟DOM来更改某一DOM节点，避免将整个页面渲染。1.关于vue，像他是一种组件化的轻量级框架，它是基于什么...
复制链接

扫一扫