vue

2019-08-23 本文已影响0人 cooqi

vue数据双向绑定原理

https://www.cnblogs.com/wangjiachen666/p/9883916.html
https://www.cnblogs.com/chenhuichao/p/10818396.html

Object.defineProperty()有两个描述属性get和set，对属性进行劫持，知道数据什么时候变改写，从而通知视图更新
1.双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性
2.如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新
因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的
3.需要解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

//实现Observer
function defineReactive(data, key, val) {
    observe(val); // 递归遍历所有子属性
    Object.defineProperty(data, key, {
        enumerable: true,//该属性能够出现在对象的枚举属性中
        configurable: true,//该属性描述符能够被改变
        get: function() {
            return val;
        },
        set: function(newVal) {
            val = newVal;
            console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');
        }
    });
}
 
function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};
 
var library = {
    book1: {
        name: ''
    },
    book2: ''
};
observe(library);
library.book1.name = 'vue权威指南'; // 属性name已经被监听了，现在值为：“vue权威指南”
library.book2 = '没有此书籍';  // 属性book2已经被监听了，现在值为：“没有此书籍”

vuex的作用以及应用场景

1.在vue组件里面，通过dispatch来触发actions提交修改数据的操作。
2.然后再通过actions的commit来触发mutations来修改数据。
3.mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
4.最后由store触发每一个调用它的组件的更新

Vuex的作用：项目数据状态的集中管理，复杂组件(如兄弟组件、远房亲戚组件)的数据通信问题。

import {mapState,mapGetters,mapActions} from 'vuex';

vue组件的数据通信

//父子
//父组件
<child :tochild='val'  @toParentFun='getChildVal'/>

//子组件
props:{
tochild:String
}

toParent(){
  this.$emit('toParentFun',val)
}

兄弟组件
1.借助中央事件总线,创建一个Vue的实例，让各个兄弟共用同一个事件机制。
2.vuex
3.子1-父-子2

//eventbus
传递数据方，通过一个事件触发bus.$emit（方法名，传递的数据) 
接收数据方，通过mounted(){}触发bus.$on (方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

https://www.jianshu.com/p/85f287cd51f3

vue中间事件总线

公共事件总线eventBus的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。

在vue生命周期beforeDestroy或者destroyed中用vue实例的$off方法清除eventBus
beforeDestroy(){
     bus.$off('click')
 }

虚拟dom

真是dom：
创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting
1.原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程###
2.用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。Diff算法。
https://www.jianshu.com/p/af0b398602bc

vue渐进式框架

渐进式框架的大概意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。

所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念
在学习中，我们没必要一上来就搞懂Vue的每一个部件和功能，先从核心功能开始学习，逐渐扩展。同时，在使用中，我们也没有必要把全部件能都拿出来，需要什么用什么就是了，而且也可以把Vue很方便的与其它已有项目或框架相结合。

package.json的配置

{
  "name": "test", // 假如项目叫做test
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
  },
  "author": "",
  "license": "ISC"
}

name: 这个很好理解，就是package的名称。不过需要注意的是，name有长度限制(虽然一般都不会超)，而且name不能以【点】或者【下划线】开头，name中不能有大写字母。这个是每一个package必须的。在业务代码中，通过require(${name})就可以引入对应的程序包了。

version: package的版本。对于业务项目来说，这个往往不太重要，但是如果你要发布自己的项目，这个就显得十分重要了。name和version共同决定了唯一一份代码。npm是用[npm-semver来解析版本号的。我们一般见到的都是大版本.次要版本.小版本这种版本号，比如16.1.0。版本号的规则、含义其实蛮多的，可以参考这篇文章。
desription：包的描述。开发组件库时必需，简明的向库的使用者介绍这个库是干嘛的。对于公司的业务项目，这个配置项一般无所谓。
keywords：关键词。一个字符串数组，对这个npm包的介绍。组件库必需，便于使用者在npm中搜索。对于公司业务项目，这个配置一般无所谓。
homepage：项目主页。对于开发组件库来说挺有用的。
bugs：开发者的联系方式，代码库的issues地址等。如果代码使用者发现了bug，可以通过这个配置项找到提bug的地方。
license：开源协议。对于开源组件库，这个十分重要。之前react还因为这事儿没少被社区嫌弃
author：项目的作者。可以为字符串，对象。
contributors：项目的贡献者。author的数组。
main：代码入口。这个十分重要，特别是对于组件库。当你想在node_modules中修改你使用的某个组件库的代码时，首先在node_modules中找到这个组件库，第一眼就是要看这个main，找到组件库的入口文件。在这个入口文件中再去修改代码吧。
scripts：指定了运行脚本命令的npm命令行缩写。十分重要。

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

1 计算属性是基于它所依赖的数据进行更新，在有在相关依赖的数据发生变化了才会进行更新，而普通的方法每次都会执行
2 计算属性是有缓存的，只要它所依赖的数据没有发生改变，后面的每一次访问计算属性中的值，都是之前缓存的结果，不会重复执行。

axios,fetch,ajax

ajax 是对原生XHR的封装
2.axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范
3.Fetch是基于promise设计的,fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

fetch的优势主要优势就是：
1.  语法简洁，更加语义化
2.  基于标准 Promise 实现，支持 async/await
3.  同构方便，使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4.更加底层，提供的API丰富（request, response）
5.脱离了XHR，是ES规范里新的实现方式

1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

https://www.jianshu.com/p/8bc48f8fde75

MVVM

MVVM是Model-View-ViewModel的缩写。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

nextTick

Vue.nextTick用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调函数，那么将返回promise对象。

1.在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

npm run dev

1.npm run XXX是执行配置在package.json中的脚本，比如：

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },

2.build/dev-server.js里var webpackConfig = require('./webpack.dev.conf') 调用了webpack.dev.conf配置文件。
3.webpack.dev.conf文件通过merge引用了webpack.base.conf.js文件。
4.在webpack.base.conf.js文件中调用了./src/main.js
5.main.js用到了一个html元素#app。
6.再次回到webpack.dev.conf.js文件的结尾处。template指定了index.html作为输出文件的模板文件。
7.在main.js文件中引用了App.vue和router。App.vue里有个router-view元素，所有通过router返回的vue都会填充在这个元素里面。
8.router/index.js文件中的路由配置，当访问根目录时就返回@/components/Hello.vue里的内容。
所以最后看到的页面是由App.vue和Hello.vue两个模块组成的。

https://www.cnblogs.com/zeroes/p/vue-run-dev.html

keep-alive

1.created钩子会创建一个cache对象，用来作为缓存容器，保存vnode节点。
2.activated ：当页面存在缓存的时候执行该函数。
3.destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。

Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓:
1.include: 字符串或正则表达式。只有匹配的组件会被缓存
2.exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
https://www.cnblogs.com/gaosirs/p/10601463.html

vuex刷新

1.Localstorage
2.computed
也就是如果有缓存的情况下computed会优先使用缓存

vue