Vue学习日记（二）——Vue核心思想

时间 2019-12-07

标签 vue 学习日记核心思想繁體版

原文原文链接

前言

Vue.js是一个提供MVVM数据双向绑定的库，其核心思想无非就是：html

数据驱动
组件系统

数据驱动

Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步很是简单。在使用 jQuery 手工操做 DOM时，咱们的代码经常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着咱们在普通HTML模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦建立了绑定，DOM将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样咱们应用中的逻辑就几乎都是直接修改数据了，没必要与 DOM 更新搅在一块儿。这让咱们的代码更容易撰写、理解与维护。vue

本人在阅读vue.js源码的时候，也发现了vue的数据驱动无非就是利用的是ES5Object.defineProperty和存储器属性，我的以为也是vue比较轻便和灵活的缘由之一。react

getter和setter（因此只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。git

附：vue.js源码图在github上vue打包好的dist文件下面的vue.js能够找到（该图与核心技术无关，只是说明vue使用这个属性）github

这个存储器属性也就是vue的核心，也是比jq好的地方之一，jq是经过绑定事件来进行操做dom，而vue和react是经过操做obj的属性来从新渲染dom框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--
        对入输入框input输入的内容都在output里面输出
     -->
    <input type="text" id="input">
    <br>
    <span id="output"></span>
</body>
<script>
    // 绑定事件的作法
    // 可是没有办法从控制台控制信息修改value
    document.getElementById("input").addEventListener("keyup", function(e) {
        document.getElementById("output").innerHTML = e.target.value
    })

    // 绑定虚拟dom的作法，就是经过改变一个obj的属性值
    // 进而改变dom的值
    var obj = {}
    // @obj 能够是任何一个对象
    // @"string" 动态绑定的属性值
    // @{} 构造getter和setter
    Object.defineProperty(obj, "string", {
        get: function() {
            console.log("getter")
        },
        set: function(val) {
            document.getElementById("output").innerHTML = val
            document.getElementById("input").value = val
        }
    })
</script>
</html>

组件系统

组件系统，就是因为vue有比较优秀的组件系统，因此，如今不少项目也都采用了vue框架，若是你想要深刻的了解组件系统，建议能够看看vue的官方文档dom

用官方一点的话来形容，组件化就是：实现了扩展HTML元素，封装可用的代码。页面上每一个独立的可视/可交互区域视为一个组件；每一个组件对应一个工程目录，组件所须要的各类资源在这个目录下就近维护；页面不过是组件的容器，组件能够嵌套自由组合造成完整的页面。组件化

简单的说，其实就是把页面进行分块处理，分红多个小块，每一个小块就是一个组件，这样能够造成组件的复用，并且提升开发效率。ui