VueJs原理/安装和介绍介绍

相信大家对mvvm双向绑定应该都不陌生了,一言不合上代码,下面先看一个本文最终实现的效果吧,和vue一样的语法,如果还不了解双向绑定,请自行搜索
<div id="mvvm-app">
    <input type="text" v-model="word">
    <p>{{word}}</p>
    <button v-on:click="sayHi">change model</button>
</div>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
    var vm = new MVVM({
        el: '#mvvm-app',
        data: {
            word: 'Hello World!'
        },
        methods: {
            sayHi: function() {
                this.word = 'Hi, everybody!';
            }
        }
    });
</script>
几种实现双向绑定的做法

目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和 view,并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种:

发布者-订阅者模式(backbone.js)

脏值检查(angular.js)

数据劫持(vue.js)

发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是 vm.set('property', value),这里有篇文章讲的比较详细,有兴趣可点这里

这种方式现在毕竟太low了,我们更希望通过 vm.property = value 这种方式更新数据,同时自动更新视图,于是有了下面两种方式

脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,当然Google不会这么low,angular只有在指定的事件触发时进入脏值检测,大致如下:

  • DOM事件,譬如用户输入文本,点击按钮等。( ng-click )

  • XHR响应事件 ( $http )

  • 浏览器Location变更事件 ( $location )

  • Timer事件( $timeout , $interval )

  • 执行 $digest() 或 $apply()

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。

思路整理

已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,如果不熟悉defineProperty,猛戳这里
整理了一下,要实现mvvm的双向绑定,就必须要实现以下几点:
1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
4、mvvm入口函数,整合以上三者

Vue数据绑定和响应式原理

当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件。以上三部分内容构成了 Vue 的整个执行过程。

Vue 实现了一个 观察者-消费者(订阅者) 模式来实现数据驱动视图。通过设定对象属性的 setter/getter 方法来监听数据的变化,而每个属性的 setter 方法就是一个观察者, 当属性变化将会向订阅者发送消息,从而驱动视图更新。

Vue 的订阅者 watcher 实现在 /src/watchr.js 。构建一个 watcher 最重要的是 expOrFn 和 cb 两个参数,cb 是订阅者收到消息后需要执行的回调,一般来说这个回调都是视图指令的更新方法,从而达到视图的更新,但是这也不是必须的,订阅回调也可以是一个和任何无关的纯函数。一个订阅者最重要的是要知道自己订阅了什么,watcher 分析 expOrFn 的 getter 方法,从而间接获得订阅的对象属性。

~~~

Vue介绍 #

Vue.js是构建数据驱动的 web 界面的库,而不是一个全能框架—它只
聚焦于视图层。特点:

  1. 响应的数据绑定
    每当修改了数据,DOM 便相应地更新。这样我们应用中的逻辑就
    几乎都是直接修改数据了,不必与 DOM 更新搅在一起。这让我
    们的代码更容易 撰写、理解与维护。
  2. 组件系统
    让我们可以用独立可复用的小组件来构建大型应用。
  3. 特性
    简洁 数据驱动 组件化 轻量快速 模块友好。

1.Vue的安装 #

  • 使用cdn
http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js
  • 通过npm安装
$ npm install vue
  • 通过bower安装
$ bower install vue

Vue.js 不支持 IE8 及其以下版本

2.初识Vue #

2.1 hello world Demo #

<div class="app">
    {{message}}
</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            message:'hello world'
        }
    });
</script>

2.2 双向数据绑定v-model #

<div class="app">
    {{message}}
+   <input type="text" v-model="message">
</div>

2.3 绑定表达式 #

2.3.1 {{}}将模型的数据取出显示到页面上 #

{{message?message:'init data'}}

支持三元表达式

2.3.2 {{*}}首次绑定数据后,不随数据变化(绑定一次) #

{{*message}}

2.3.3 {{{}}}将html类型的数据正常绑定到页面上 #

<div class="app">
    {{{message}}}
</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            message:'<h1>hello world</h1>'
        }
    });
</script>

2.4 Vue的实例 #

一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel

var message  = {
    name:'hello'
};
var vm = new Vue({
    el:'.app',
    data:{
        message:message
    }
});
alert(vm.message == message);

实例上的data属性绑定的数据和原数据指定的是同一内存空间

2.4.1 修改数据属性刷新视图 #

var message  = {
    name:'hello'
};
var vm = new Vue({
    el:'.app',
    data:{
        message:message
    }
});
message.name = 1000; //视图刷新

注意

  1. 不能将原数据指向新的数据,否则不能刷新视图

     var message  = {
         name:'hello'
     };
     var vm = new Vue({
         el:'.app',
         data:{
             message:message
         }
     });
     message = {name:'hello1'}
    
  2. 实例创建后不能设置以前没有的属性,无法映射到视图
     var message  = {
         name:'hello'
     };
     var vm = new Vue({
         el:'.app',
         data:{
             message:message
         }
     });
     message.age = 100;
    

    Vue.set/vm.$set可以给对象添加属性

2.5 实例上的属性和方法 #

Vue通过$暴露实例上的属性和方法

2.5.1 $el #

获取当前绑定的元素

vm.$el = document.querySelector('.app');

不能更改绑定对象

2.5.2 $data #

获取当前绑定的数据

vm.$data = {message:{name:1}}

更换data对象刷新视图,尽量不去更换

2.5.3 $watch #

监控模型的变化

vm.$watch('message', function (newVal,oldVal) {
    console.log(newVal,oldVal);
});

3. 生命周期 #

vue声明周期

3.1 属性介绍 #

方法名 用法
created 先实例化,在实例化后(检测el)
vm.$mount(‘#app’) 手动挂载实例
beforeCompile 开始编译之前
compiled 编译完成后
ready 插入文档后
vm.$destroy() 手动销毁实例
beforeDestroy 将要销毁
destroyed 销毁实例

3.2 生命周期的使用 #

var vm = new Vue({
    data:{
        hello:'zfpx'
    },
    created: function () {alert('实例创建完成');},
    beforeCompile: function () {alert('开始编译前')},
    compiled: function () {alert('编译完成')},
    ready: function () {alert('准备好了')},
    beforeDestroy: function () {alert('准备销毁')},
    destroyed: function () {alert("销毁")}
});
vm.$mount('#app');
vm.$destroy();

3.3 属性的计算 #

用于计算性属性(默认为属性的get方法)

var vm = new Vue({
    data:{
        name:'zfpx'
    },
    computed: {
        hello: function () {
            return this.name+8;
        }
    }
});
vm.$mount('#app');

属性的获取和设置

var vm = new Vue({
    data:{
        name:'zfpx'
    },
    computed: {
        hello:{
            get: function () {
                return this.name+8;
            },
            set: function (val) {
                this.name = val
            }
        }
    },
});

Vue.js 最核心的功能有两个;

一是响应式的数据绑定系统

二是组件系统。

~~~

未经允许不得转载:WEB前端开发 » VueJs原理/安装和介绍介绍

赞 (0)