了解vue框架

最新推荐文章于 2024-06-12 08:04:17 发布

别来…无恙

最新推荐文章于 2024-06-12 08:04:17 发布

阅读量286

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43942185/article/details/104952571

版权

Vue

Vue是一个前端js框架，由尤雨溪开发，是个人项目目前由饿了么ude团队进行维护

Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄的问世了，它的优雅，轻便也吸引了一部分用户，开始收到关注，16年中旬，VUE2.0问世，这个时候vue不管从性能上，还是从成本上都隐隐超过了react，火的一塌糊涂，这个时候，angular开发团队也开发了angular2.0版本，并且更名为angular，吸收了react、vue的优点，加上angular本身的特点，也吸引到很多用户。
学习vue是现在前端开发者必须的一个技能。

前端js框架作用，为什么要用

js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为如下几点：

渲染数据
操作dom（写一些效果）
操作cookie等存储机制api

在前端开发中，如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题。

而js框架对上述的几个问题都有自己趋于完美的解决方案，开发成本降低、高性能高效率。唯一的缺点就是需要使用一定的成本来学习。

Vue官网介绍

vue是渐进式JavaScript框架 用到什么功能，只需要引入什么功能模块

在这里插入图片描述

vue的主张较弱

Vue可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发，并且因为Vue的生态系统特别庞大，可以找到基本所有类型的工具在vue项目中使用

特点：易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）

Vue是一个MVVM的js框架，但是，Vue 的核心库只关注视图层，开发者关注的只是m-v的映射关系

在这里插入图片描述

vue框架的引入与简单使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="test">
         <!-- 声明一条数据，然后用特殊的模板语法将其渲染到界面中 ===> 声明式渲染 -->
        {{msg}}
    </div>

    <!-- 引入vue框架  新手建议引入开发版的vue，有错误代码提示 -->
    <script src="./base/vue.js"></script>
    <script>
        // 创建vue实例
        new Vue ({
            el:"#test",  //el ==> 挂载点
            data:{      //data ==> 数据
                msg:"hello world"
            }     
        })
    </script>
</body>

</html>

MV*模式（MVC/MVP/MVVM）

mv*模式

MVC

Model View Controller

用户对View操作以后，View捕获到这个操作，会把处理的权利交移给 Controller；Controller会对来自View数据进行预处理、决定调用哪个Model的接口；然后由Model执行相关的业务逻辑（数据请求）；当Model变更了以后，会通过观察者模式（Observer Pattern）通知View； View通过观察者模式收到Model变更的消息以后，会向Model请求最新的数据，然后重新更新界面。

把业务逻辑和展示逻辑分离，模块化程度高。但由于View是强依赖特定的 Model的，所以View无法组件化，无法复用

在这里插入图片描述

MVP

Model View Presenter

和MVC模式一样，用户对View的操作都会从View交移给Presenter。 Presenter会执行相应的应用程序逻辑，并且对Model进行相应的操作；而这时候Model执行完业务逻辑以后，也是通过观察者模式把自己变更的消息传递出去，但是是传给Presenter而不是View。Presenter获取到Model变更的消息以后，通过View提供的接口更新界面。

在这里插入图片描述

View不依赖Model，View可以进行组件化。但Model->View的手动同步逻辑麻烦，维护困难

例子
在这里插入图片描述
比如点击toggle按钮时要使得红色盒子显示隐藏，使用原生js实现的话如下。

<body>  

    <div id="box">
        <button class="btn">toggle</button>
        <button class="btn2">big</button>
        <div class="box">

        </div>
    </div>

    <script>
          //面向过程的代码
        let btnDom = document.querySelector(".btn")
        let boxDom = document.querySelector(".box")
        let flag = true
        btnDom.onclick = function(){
            if(flag){
                boxDom.style.display = "none"
                flag = false
            }else{
                boxDom.style.display = "block"
                flag = true
            }
        } 
    </script>
</body>

如果说仅仅实现一个功能，使用原生js还是比较容易的，但是如果需要添加多个功能的话，那这种方法无疑是最吃力的。如果换成vue框架来实现，就会轻松很多了，下面我们看看使用vue框架是如何实现的：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>

    <div id="box">
        <button class="btn">toggle</button>
        <button class="btn2">big</button>
        <div class="box">

        </div>
    </div>

    <!-- 引入vue框架  新手建议引入开发版的vue，有错误代码提示 -->
    <script src="./base/vue.js"></script>
    <script>

        /*
            mvc:
                m:model       数据模型层    dao层 
                v:view        视图层        
                c:controller  控制器       service

            controller的作用：就是将m层的数据在view层进行显示
        
        */

        //   m层
        let model = {
            isShow: true,
            isBig: true
        }

        // v 层
        let boxDom = document.querySelector(".box")

        //c层
        function controller() {
            this.init()
        }
        controller.prototype = {
            init() {
                this.addEvent()
            },
            addEvent() {
                let btnDom = document.querySelector(".btn")
                let btn2Dom = document.querySelector(".btn2")
                // 实现显示隐藏功能
                btnDom.onclick = () => {
                    // 更改数据
                    model.isShow = !model.isShow
                    // 渲染视图
                    this.render()
                }
                // 添加放大 还原功能
                btn2Dom.onclick = () => {
                    // 更改数据
                    model.isBig = !model.isBig
                    // 渲染视图
                    this.render()
                }
            },
            // 要实现的效果
            render() {
                boxDom.style.display = model.isShow ? "block" : "none"
                boxDom.style.width = model.isBig ? "300px" : "100px"
            }
        }

        new controller()

    </script>
</body>
</html>

如此一来就轻松多了。
在这里插入图片描述

MVVM

Model View ViewModel

MVVM的调用关系和MVP一样。但是，在ViewModel当中会有一个叫 Binder，或者是Data-binding engine的东西。你只需要在View的模版语法中，指令式地声明View上的显示的内容是和Model的哪一块数据绑定的。当ViewModel对Model进行更新的时候，Binder会自动把数据更新到View上去；当用户对View进行操作（例如表单输入），Binder也会自动的把数据更新到Model上去。这种方式称为：Two-way data-binding，双向数据绑定。

它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然

在这里插入图片描述

Vue的使用

Vue不支持IE8，因为使用了ES5的很多特性
Object.defineProperty(_data,“msg”,{get(),set()}) _data.msg

可以直接通过script标签来引入vue.js，有开发版本和生产版本，开发版本一般我们在开发项目的时候引入，当最后开发完成上线的时候引入生产版本，开发版本没有压缩的，并且有很多提示，而生产版本全部删掉了

直接下载并用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

在Vue中提供了一个脚手架（命令行工具）可以帮我们快速的搭建基于webpack的开发环境…

npm install ‐g @vue/cli

Vue的实例

每一个应用都有一个根实例，在根实例里我们通过组件嵌套来实现大型的应用

也就是说组件不一定是必须的，但是实例是必须要有的

在实例化实例的时候我们可以传入一个；配置项，在配置项中设置很多属性方法可以实现复杂的功能

在配置中可以设置el的属性，el属性代表的是此实例的作用范围

在配置中同过设置data属性来为实例绑定数据

vue的双向数据绑定原理原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty
是 ES5 中一个无法模拟的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。每个组件实例都对应一个 watcher实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知watcher，从而使它关联的组件重新渲染。
vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineProperty方法，为数据动态的添加getter与setter方法。当获取数据的时候，会触发对应的getter方法，当设置数据的时候，触发对应的setter方法。然后当setter方法触发完成的时候，内部会进一步触发watcher,当数据改变了，视图则更新操作完毕。

vue内部通过数据劫持&发布订阅模式实现数据的双向绑定

通过Object.defineProperty方法对所有的数据进行数据劫持，就是给这些数据动态的添加了getter与setter方法。在数据变化的时候发布消息给订阅者（Watcher），触发响应的监听回调。

在这里插入图片描述

<body>
    
    <div id="app">
       
    </div>


    <script src="./base/vue.min.js"></script>
    <script>
    
        var obj = {}
        let middel = 100
        Object.defineProperty(obj,"msg",{
            get(){
                return middel
            },
            set(val){
                middel = val
            }
        })

        console.log(obj.msg)   //获取对象的属性的时候，会调用自身的get方法
        obj.msg = 1111           //设置对象的属性的时候，会调用自身的set方法
        console.log(obj.msg)     
    </script>
</body>

扩展：

注意：vue3 的变化 Object.defineProperty有以下缺点。

1、无法监听es6的Set、Map 变化；

2、无法监听Class类型的数据；

3、属性的新加或者删除也无法监听；

4、数组元素的增加和删除也无法监听。

针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不支持Proxy），会自动降级为Object.defineProperty的数据监听系统。

别来…无恙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
了解vue框架

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法模拟的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 wa
复制链接

扫一扫