1、vue父子组件之间的通信
在vue组件通信中其中最常见通信方式就是父子组件之中的通性，而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用，遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小异。
父组件到子组件通讯
父组件到子组件的通讯主要为：子组件接受使用父组件的数据，这里的数据包括属性和方法（String,Number,Boolean,Object, Array ,Function）。vue提倡单项数据流，因此在通常情况下都是父组件传递数据给子组件使用，子组件触发父组件的事件，并传递给父组件所需要的参数。
通过props传递数据
父子通讯中最常见的数据传递方式就是通过props传递数据，就好像方法的传参一样，父组件调用子组件并传入数据，子组件接受到父组件传递的数据进行验证使用。
props可以接受function,所以function也可以以这种方式传递到子组件使用。
通过$on传递父组件方法
通过$on传递父组件方法是组件通信中常用的方法传递方式。它可以与通过props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表现出了调用关系。
获取父组件然后使用父组件中的数据（不推荐）
准确来说这种方式并不属于数据的传递而是一种主动的查找。父组件并没有主动的传递数据给子组件，而是子组件通过与父组件的关联关系，获取了父组件的数据。
该方法虽然能实现获取父组件中的数据但是不推荐这种方式，因为vue提倡单向数据流，只有父组件交给子组件的数据子组件才有使用的权限，不允许子组件私自获取父组件的数据进行使用。在父与子的关系中子应当是处于一种被动关系。
此处的this为子组件实例
子组件到父组件通讯
子组件到父组件的通讯主要为父组件如何接受子组件之中的数据。这里的数据包括属性和方法（String,Number,Boolean,Object, Array ,Function）。
通过$emit传递父组件数据
与父组件到子组件通讯中的$on配套使用，可以向父组件中触发的方法传递参数供父组件使用。
refs获取
可以通过在子组件添加ref属性，然后可以通过ref属性名称获取到子组件的实例。准确来说这种方式和this.$parent一样并不属于数据的传递而是一种主动的查找。
尽量避免使用这种方式。因为在父子组件通信的过程中。父组件是处于高位是拥有控制权，而子组件在多数情况下应该为纯视图组件，只负责视图的展示和自身视图的逻辑操作。对外交互的权利应该由父组件来控制。所以应当由父组件传递视图数据给子组件，子组件负责展示。而子组件的对外交互通过$emit触发父组件中相应的方法，再由父组件处理相应逻辑。
父组件
importChildOnefrom'./ChildOne';exportdefault{components: { ChildOne, }, mounted(){console.log(this.$refs['child']); }, };
2、计算属性与方法属性的区别
在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
在这种情况下，模板不再简单和清晰。在实现反向显示 message 之前，你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。
这就是为什么任何复杂逻辑，你都应当使用计算属性。
结果：
Original message: "Hello"
Computed reversed message: "olleH"
这里我们声明了一个计算属性 reversedMessage 。我们提供的函数将用作属性 vm.reversedMessage 的 getter 。
你可以打开浏览器的控制台，修改 vm 。 vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。
你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果：
不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着如下计算属性将不会更新，因为 Date.now() 不是响应式依赖：
相比而言，每当重新渲染的时候，method 调用总会执行函数。
我们为什么需要缓存？假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。
Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS 。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。思考下面例子：
上面代码是命令式的和重复的。跟计算属性对比：
这样更好，不是吗？
3、详解Vue双向数据绑定原理解析
基本原理
Vue.采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，数据变动时发布消息给订阅者，触发相应函数的回调。
思路整理
要实现mvvm的双向绑定，需要实现如下几点：
1.实现一个数据监听器Observer，能够对对象的所有属性进行监听，发生变化时拿到最新值通知订阅者
2.实现一个解析器Compile，对每个子元素节点的指令进行扫描和解析，根据模板指令替换数据，初始化视图以及绑定相应的回调函数；
3.实现一个Watcher，作为Observer和Compile的桥梁，能够订阅属性变动的通知，执行指令绑定的回调函数，更新视图
4.mvvm的入口，整合以上三者
小结
双向绑定的原理很简单，通过数据劫持，当设置新属性值的时候通过订阅者更新视图；编译指令，替换变量，同时绑定更新函数到订阅者；对应事件绑定调用addEventListener进行监听。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
4、详解Vue的生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。下图展示的就是一个vue实例对象的生命周期。
我们可以看到，vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容
beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
created ：数据已经绑定到了对象实例，但是还没有挂载对象
beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 $el属性，$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
mounted:将$el的内容挂载到了el，相当于我们在jquery执行了$(el).html($el),生成页面上真正的dom，上面我们就会发现dom的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作
当我们的data发生改变时，会调用beforeUpdate和updated方法
beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新
beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动
网友评论