vue js官网，Vue.js的官方指南
其实vue js官网的问题并不复杂，但是又很多的朋友都不太了解Vue.js的官方指南，因此呢，今天小编就来为大家分享vue js官网的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
深入浅出Vue.js--变化侦测
侦测状态变化，重新渲染页面。
拉(通知状态改变，然后暴力比对哪些节点需要重新渲染)： Angular脏检查、React虚拟dom
推(明确知道哪些状态改变，细粒度，通知绑定这个状态的依赖节点更新)： Vue
但，粒度越细，每个状态绑定的依赖越多，追踪开销就越大。从Vue2.0开始引入虚拟dom，绑定依赖到组件层面，而不是节点层面。状态改变，通知到组件，组件内部再使用虚拟dom进行比对。
追踪变化 Object.defineProperty和 Proxy
收集依赖
当数据发生变化的时候，需要通知使用了该数据的地方。所以在gettter中收集依赖，在setter中触发依赖。
为了减少耦合，封装Dep类，专门管理依赖
收集的依赖window.target，到底是啥？依赖是用到数据的地方，可能是模板，可能是用户写的一个watch，需要抽象出一个类集中处理多种情况，收集依赖阶段只收集这个类的实例，通知也只通知它，它再负责通知其他地方-- Watcher。
递归侦测所有key
封装一个Observer类用于将data中的所有属性（包括子属性）都转化成getter/setter的形式。
getter/setter只能追踪一个属性是否被修改，但无法追踪新增和删除属性，所以另外提供了vm. delete两个api。ES6之前。
图
侦测Object变化是通过getter/setter实现的，但是如果用Array原型上的方法改变数组，就无法侦测了。同setter追踪，如果可以在用户使用Array原型上的方法改变数组时，得到通知，就可以侦测变化。
我们可以用一个拦截器arrayMethods去覆盖Array.prototype，在拦截器中发送变化通知，再执行原本的功能。改变数组自身内容的7个方法： ['push','pop','shift','unshift','splice','sort','reverse']
拦截器arrayMethods不能直接覆盖Array.prototype，会污染全局的Array。我们的拦截操作只需要针对那些被侦测了变化的数据生效，也就是说拦截器只覆盖那些响应式数组的原型。将一个数据转化成响应式，需要用到Observer。
ES6用Object.getPropertyOf和Object.setPropertyOf替代了 proto。
每次访问数组的值，就会触发getter。所以Array在getter里收集依赖，在拦截器中触发依赖。
依赖列表dep存储在Observer中，因为getter和拦截器中都可以访问到Observer实例。
getter中访问：
拦截器中访问：
这样，就可以通过数组值的 ob属性访问到Observer实例上的dep，调用改变数组内容的方法时，通知依赖。同时，收集依赖中的observe函数中通过 ob来判断，数据是否已经被Observer转换成了响应式。
侦测数组中元素变化
侦测新增元素变化
可以新增数组元素的方法为：push、unshift和splice，可以取出新增元素，使用observeArray方法使其变成响应式的。
Array的变化侦测是通过拦截原型上方法实现的，所以对直接给数组某一项赋值，或者通过设置length改变数组，是侦测不到的。所以可以用api或方法代替。
expOrFn: a.b.c or函数
options:{ deep, immediate}
用于观察一个表达式或computed函数在Vue实例上的变化。回调函数调用时，会从参数得到newValue和oldValue。返回一个取消观察函数，用来停止触发回调。
deep: watch对象内部值的变化，都会触发回调
immediate:立即以表达式的当前值触发回调
所有vm.$开头的属性，都是写在Vue.prototype上的。
原理
teardown首先需要先在Watcher中记录自己被收录进了哪些Dep中，当unwatch时，遍历自己的记录列表，从dep依赖列表中把自己删除。
deep实现原理：除了要触发当前这个被监听数据的收集依赖之外，需要把其所有子值都触发一遍收集依赖。当子数据发生变化时，可以通知当前Watcher。
在taget上设置一个属性，如果target是响应式的，被创建的属性也是响应式的，并触发视图更新。主要用来避免vue侦测不到新增加属性的限制。
用于删除target对象上的key属性。如果对象是响应式的，需要确保删除能触发更新试图。主要为了避免直接使用delete无法被侦测到变化的限制。
如何在 Vue.js 中使用第三方库
在 Vue.js中使用第三方库的方式有：
1.全局变量
在项目中添加第三方库的最简单方式是讲其作为一个全局变量,挂载到 window对象上:
entry.js
window._= require('lodash');
MyComponent.vue
export default{
created(){
console.log(_.isEmpty()?'Lodash everywhere!':'Uh oh..');
}
}
这种方式不适合于服务端渲染,因为服务端没有 window对象,是 undefined,当试图去访问属性时会报错.
2.在每个文件中引入
另一个简单的方式是在每一个需要该库的文件中导入:
MyComponent.vue
import _ from'lodash';
export default{
created(){
console.log(_.isEmpty()?'Lodash is available here!':'Uh oh..');
}
}
这种方式是允许的,但是比较繁琐,并且带来的问题是:你必须记住在哪些文件引用了该库,如果项目不再依赖这个库时,得去找到每一个引用该库的文件并删除该库的引用.如果构建工具没设置正确,可能导致该库的多份拷贝被引用.
3.优雅的方式
在 Vuejs项目中使用 JavaScript库的一个优雅方式是讲其代理到 Vue的原型对象上去.按照这种方式,我们引入 Moment库:
entry.js
import moment from'moment';
Object.defineProperty(Vue.prototype,'$moment',{ value: moment});
由于所有的组件都会从 Vue的原型对象上继承它们的方法,因此在所有组件/实例中都可以通过 this.$moment:的方式访问 Moment而不需要定义全局变量或者手动的引入.
MyNewComponent.vue
export default{
created(){
console.log('The time is'. this.$moment().format("HH:mm"));
}
}
vue.js和angularjs的区别
选择 Vue而不选择 Angular，有下面几个原因，当然不是对每个人都适合：
在 API与设计两方面上 Vue.js都比 Angular简单得多，因此你可以快速地掌握它的全部特性并投入开发。
Vue.js是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是任何时候都必须遵循 Angular制定的规则。它仅仅是一个视图层，所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。在配合其他库方面它给了你更大的的空间，但相应，你也需要做更多的架构决策。例如，Vue.js核心默认不包含路由和 Ajax功能，并且通常假定你在应用中使用了一个模块构建系统。这可能是最重要的区别。
Angular使用双向绑定，Vue也支持双向绑定，不过默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。
在 Vue.js中指令和组件分得更清晰。指令只封装 DOM操作，而组件代表一个自给自足的独立单元——有自己的视图和数据逻辑。在 Angular中两者有不少相混的地方。
Vue.js有更好的性能，并且非常非常容易优化，因为它不使用脏检查。Angular，当 watcher越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher都要重新计算。并且，如果一些 watcher触发另一个更新，脏检查循环（digest cycle）可能要运行多次。 Angular用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher的作用域。Vue.js则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for上使用 track-by。
有意思的是，Angular 2和 Vue用相似的设计解决了一些 Angular 1中存在的问题。
文章分享结束，vue js官网和Vue.js的官方指南的答案你都知道了吗？欢迎再次光临本站哦！