vue相关知识

时间  2019-12-08
标签 vue 相关 知识 繁體版
原文   原文链接

说下Vue数据双向绑定的原理

原理：vue采用数据劫持结合发布者-订阅者模式的方法，经过Object.defineProperty()来劫持各个属性的setter、getter属性，若是数据变更的话，通知订阅者，触发更新回调函数，从新渲染视图。javascript

说说Vuex的做用以及应用场景

页面经过mapAction异步提交事件到action，action经过commit或者dispatch（异步）把对应的参数同步提交到mutation，mutation会修改state里面对应的值，最后经过getter把对应的值给抛出去，在页面的计算属性中经过mapGetter来动态获取state中的值。html

vuex有5种属性： State、Getter、Mutation、Action、Modulevue

  • State是存放数据的地方，相似一个仓库，特性就是当Mutation修改了State数据的时候，它会动态的去修改全部的调用这个变量的全部组件里面的值（如果store中的数据发生了变化，依赖这个数据的组件也会发生更新）java

  • getter用来获取数据，mapGetter通常在计算属性中使用node

  • action相似于Mutation。不一样在于react

    一、Action提交的是Mutation而不是在于直接变动状态webpack

    二、Action能够包含异步操做ios

Vue组件的数据通讯方式

vue组件通讯主要是指如下三类通讯：父子组件通讯、隔代组件通讯、兄弟组件通讯git

  • props/$emit 适用父子组件通讯

props向子组件传值，$emit父组件传值或方法web

  • ref与parent/children适用 父子组件通讯

若是在普通的元素DOM上适用，引用指向的是元素DOM，若是用在子组件上，引用指向组件实例。parent/children: 访问父/子实例

  • EventBus（emit/on）适用于 父子、隔代、兄弟组件通讯

这种方法经过一个空的Vue实例做为中央事件总线（事件中心），用来触发事件和监听事件，从而实现任何组件之间的通讯，包括父子、隔代、兄弟组件

  • attrs/listeners 适用于隔代组件

    "attrs"：包含了父级做用域不被props识别（且获取）的特性绑定（class和style除外），当一个组件没有声明任何props时，这里会包含全部父级做用域的绑定（class和style除外），而且能够经过v-bind="attrs"传入组件内部，一般配合inheritattrs选项一块儿使用。 #listeners：包含父级做用域中的（不含.native修饰器的）v-on事假监听，它能够经过v-on="$listeners"传入内部组件

  • provide/inject 适用于隔代组件

祖先组件经过provider来提供变量，而后在子组件中经过inject来注入变量。provide/inject Api 主要解决了跨级组件间的通讯，不过它的使用场景，主要是在子组件获取上级组件的状态，跨级组件间创建了一种主动提供与依赖注入的关系。

  • vuex 适用于父子组件、隔代组件、兄弟组件

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地获得高效更新。 改变 store 中的状态的惟一途径就是显式地提交 (commit) mutation。这样能够方便地跟踪每个状态的变化。

为何说虚拟 dom会提升性能，解释一下它的工做原理

  • 什么是虚拟DOM

虚拟DOM其实就是一个javascript对象，经过这个Javascript对象来描述真是DOM

  • 为啥真实DOM推荐操做

真实DOM操做，通常会对某块元素进行从新渲染

  • 为何虚拟DOM能提高性能，

采用虚拟DOM的话，当数据发生变化的时候，字须要局部刷新变化的位子就行了。

  • 虚拟DOM和真实DOM的区别

    1. 虚拟DOM不会进行重拍和重绘
    2. 虚拟DOM进行频繁修改，而后一次性对比并求改真实DOM中须要修改的部分，最后并在真实DOM中排版与重绘，减小过多DOM节点排版和重绘。
    3. 真实DOM频繁排版和重绘的效率至关低下
    4. 虚拟DOM有效下降大面积真实DOM节点的重绘和重排，由于最终与真实DOM比较差别，能够只进行局部渲染

请你详细介绍一些 package.json 里面的配置

{
  "name": "Hello World", // 项目名称.
  "version": "0.0.1", //项目的版本号
  "author": "张三", //项目的做者
  "description": "第一个node.js程序", //项目的描述
  "keywords": [ //关键字。方便使用者在 npm search中搜索。格式为字符串。
    "node.js",
    "javascript"
  ],
  "repository": { //用于指示源代码存放的位置
    "type": "git",
    "url": "https://path/to/url"
  },
  "license": "MIT",
  "engines": { //指明了该项目所须要的node.js版本
    "node": "0.10.x"
  },
  "bugs": { //可选字段，文图追踪系统的URL或邮箱地址；npm bugs使用
    "url": "http://path/to/bug",
    "email": "bug@example.com"
  },
  "contributors": [ //项目的其余贡献者
    {
      "name": "李四",
      "email": "lisi@example.com"
    }
  ],
  "scripts": { //指定了运行脚本命令的npm命令行缩写，使用scripts字段定义脚本命令。
    "start": "node index.js"
  },
  "dependencies": { // 生产/开发环境依赖包列表
    "express": "latest",
    "mongoose": "~3.8.3",
    "handlebars-runtime": "~1.0.12",
    "express3-handlebars": "~0.5.0",
    "MD5": "~1.2.0"
  },
  "devDependencies": { //指定项目开发所须要的模块。
    "bower": "~1.2.8",
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-clean": "~0.5.0",
    "browserify": "2.36.1",
    "grunt-browserify": "~1.3.0",
  }
}
复制代码

为何说Vue是一套渐进式框架

个人理解是：主张问题较少，没有那多的硬性要求。 每一个都会有本身的一些特色，从而对使用者有必定的要求，这些要求有强有弱。

好比，angular的两个版本都是强主张，若是你使用它，必须接受如下东西

  1. 必须使用它的模块机制，必须使用它的依赖注入，必须使用它的特殊形式定义组件

好比react，，它也有必定程度的主张，它的主张主要是函数式编程的理念，好比说，你须要知道什么是反作用，什么是纯函数，如何隔离反作用。它的侵入性看似没有Angular那么强，主要由于它是软性侵入。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你能够在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也能够整个用它全家桶开发，当Angular用；还能够用它的视图，搭配你本身设计的整个下层用。你能够在底层数据逻辑的地方用OO和设计模式的那套理念，也能够函数式，均可以，它只是个轻量视图而已，只作了本身该作的事，没有作不应作的事，仅此而已。

vue-cli提供的几种脚手架模板有哪些，区别是什么

vue-cli提供了两种脚手架模板，webpack和webpack-simple

  1. webpack-simple没有vue-router的中间件，不须要路由的时候可使用
  2. webpack-simple没有格式的检测

计算属性的缓存和方法调用的区别

vue官方文档上说：咱们能够将同一个函数定义为方法而不是一个计算属性，两种方式的最终结果都是彻底相同的，不一样的是计算属性是基于他们的响应式依赖进行缓存的，只在相关响应式依赖发生变化时，他们才会从新求值，这就意味着只要message尚未发生变化，屡次访问reversedMessage计算属性会当即返回以前的计算结果，而没必要执行函数；

个人理解就是：当页面从新渲染的时候（不是刷新），计算属性不会发生变化，而是直接读取缓存使用，适合于大量的计算和改变频率较低的属性。

而methods，就是当页面从新渲染的时候，页面元素data发生变化，页面就会从新渲染，都是从新调用methods方法。

axios、fetch与ajax有什么区别

  • JQuery
$.ajax({
    method: "post",
    url: url,
    data: data,
    dataType: dataType,
    success； functon () {},
    error: function() {}
})
复制代码

优缺点：

  1. 自己针对MVC的编程，不符合如今MVVM的编程思想
  2. 基于原生的XHR的开发，XHR自己的结构不清晰，已经有了fatch的替代方案
  3. JQuery的整个项目太大，单纯使用ajax须要引入整个JQuery，采起个性化打包方案不能享受CDN服务
  • axios
axios({
    method: "post",
    url: url,
    data: {
        message: '123'
    }
}).then(res => {}).catch(err => {})
复制代码

优势：

  1. 从浏览器中建立XMLHTTPRequest
  2. 支持Promise API
  3. 客户端防止CSRF攻击
  4. 提供了一些并发请求接口
  5. 从nodeJS建立http请求
  6. 拦截请求和响应
  7. 转化请求和响应
  8. 取消请求
  9. 自动转化JSON数据
  • fatch
tyu {
    let response = await fetch(url)
    let data = response.json()
    console.log(data)
} catch (e) {
    console.log('error')
}
复制代码

fetch是ajax的替代品，使用了ES6中Promise对象，fetch是基于promise设计的，fetch不是ajax的进一步封装，而是原生js，没有使用XMLHTTPRequest对象

优势：

  1. 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
  2. 符合更方便的写法

vue中央事件总线的使用

vue中央事件总线eventBus的实质就是建立一个vue实例，经过一个空白的vue实例做为桥梁实现vue组件的通讯，它是实现非父子组件通讯的一种解决方案。

// 使用一个vue实例，做为事件载体，用于绑定事件和处理发送事件，做为调度中心
        let eventBus = new Vue()
        let one = {
            template: '<div>{{ val }} <button @click="click">click</button></div>',
            data() {
                return {
                    val: 0
                }
            },
            created() {
                // 为one绑定事件，若是tow_click事件发生了改变，则执行改变函数
                eventBus.$on('two_click',
                    (val) => {
                    // 这个this 指的是one的vue实例
                    this.val = val
                    }
                )
            },
            methods: {
                click() {
                    // 若是one被点击了，则发送一个one_click的事件，并传递一个参数
                    eventBus.$emit('one_click', 11)
                }
            }
        }
        let two = {
            template: '<div>{{val}} <button @click="click">click</button></div>',
            data() {
                return {
                    val: 0
                }
            },
            created() {
                eventBus.$on('one_click',
                 (val) => {
                    this.val = val
                })
            },
            methods: {
                click() {
                    eventBus.$emit('two_click', 22)
                }
            }
        }
        new Vue({
            el: '#app',
            components: {
                one,
                two
            }
        })
复制代码

实现MVVM的思路分析

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型，【模型】指的是后端传递的数据，【视图】指的是所看到的页面，【视图模型】MVVM的核心，它是连接model和view的桥梁，它有两个方向：一是将【模型】转化为【视图】，即将后端传递的数据转化为所看到的页面，实现的方式是数据绑定，二是将【视图】转化为【模型】，即将所看到的页面转化为后端数据。实现的方式是DOM监听。这两个方向都实现咱们称之为数据的双向绑定。

在MVVM的框架下的【视图】和【模型】不能直接通讯，他们经过ViewModel来通讯，ViewModel一般要实现一个Observer观察者，当数据发生变化，ViewModel可以监听到数据的这种变化，而后通知到对应的视图作自动更新，而当用户操做视图，ViewModel也能监听到视图的变化，而后通知数据作改动，这就实现了数据的双向绑定，而且MVVM中的View和ViewModel能够相互通讯。

说说Vue开发命令 npm run dev 输入后的执行过程

npm run xxx是运行package.json里面的script命令

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
复制代码

这里运行了build/webpack.dev.conf.js文件

webpack.dev.conf.js 经过marge引用了 webpack.base.conf.js

在webpack.base.conf.js文件中调用了main.js文件

在main.js中用到html元素#app

template指定了index.html做为输出文件的模板文件

vue-cli中经常使用到的加载器有哪些

  • vue-loader --- 用于加载和编译*.vue文件
  • vue-style-loader --- 用于加载*.vue文件中的样式
  • style-loader --- 用于将样式直接插入到页面的
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程