Vue学习日记——Vue核心思想

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue学习日记——Vue核心思想相关的知识,希望对你有一定的参考价值。

前言

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

  • 数据驱动
  • 组件系统

数据驱动

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

技术图片

本人在阅读vue.js源码的时候,也发现了vue的数据驱动无非就是利用的是ES5Object.defineProperty和存储器属性,个人觉得也是vue比较轻便和灵活的原因之一。

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

附:vue.js源码图在github上vue打包好的dist文件下面的vue.js可以找到(该图与核心技术无关,只是说明vue使用这个属性)

技术图片

这个存储器属性也就是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的官方文档

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

简单的说,其实就是把页面进行分块处理,分成多个小块,每个小块就是一个组件,这样可以形成组件的复用,而且提高开发效率。

技术图片

以上是关于Vue学习日记——Vue核心思想的主要内容,如果未能解决你的问题,请参考以下文章

vue学习日记:vue路由搭建

谷粒商城学习日记(21)——Vue生命周期

初步了解VUE源码

Vue学习日记——Vue路由管理vue-router

Vue学习日记——Vue状态管理vuex

谷粒商城学习日记(20)——Vue语法入门