vue核心思想

作者: 飞飞廉 | 来源:发表于2017-11-29 11:49 被阅读0次

Vue.js 介绍及其脚手架工具搭建
Vue核心思想
vue核心思想
vue核心思想
（19）打鸡儿教你Vue.js
Vue入门与进阶
Vue学习总结
学习vue的响应式 mvvm -01 数据响应式
Why use VUE？
Vue 渐进式框架

vue核心思想：

MVVM框架：
dom-viewmodel-model
组件化
数据的双向绑定：
1)常规思路：
用keyup事件监听，获取改变的值赋值给另一个对象的text。
2)vue思路：
vue采用数据劫持结合发布者订阅者模式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Object.defineProperty(obj,"username",{
    set:function(newVal){

    },
    get:function(){

    }
})

接受三个参数：
obj:目标对象
username：需要定义的属性或者方法的名字
{}:目标属性所拥有的特性（decriptor）
descriptor：
value：属性的值
configurable：总开关，一旦为false，就不能设置其他的了（value，configurable，enumerable）
enumerable：是否能在for in循环中遍历出来火灾Object.keys中列举出来。
wriatable可写
以上三个（除了value）用Object.defineProperty()定义时默认为false属性，若直接在对象上定义属性，默认为true

访问器属性：

configurable
enumerable
set和get：set是当给属性username赋值新属性的时候触发，get是获取username的时候触发。
注意：在 descriptor 中不能同时设置访问器 (get 和 set) 和 wriable 或 value，否则会错，就是说想用(get 和 set)，就不能用（wriable 或 value中的任何一个）

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var obj={};
            Object.defineProperty(obj,"userName",{
                get:function(){

                },
                set:function(newVal){
                    document.getElementById('uName').innerText=newVal;
                    document.getElementById('username').value=newVal;
                }
            })
            document.getElementById("username").addEventListener("keyup",function(){
                obj.userName=event.target.value;
            })
        }
    </script>
</head>
<body>
    <input type="text" id="username">
    <span id="uName"></span>
</body>
</html>