ition> <keep-alive> <component :is="view"></component> </keep-alive> </transition>
类型:(createElement: () => VNode) => VNode
详细:字符串模板的代替方案,允许你发挥 java script 最大的编程能力。该渲染函数接收一个 createElement
方法作为第一个参数用来创建 VNode
。如果组件是一个函数组件,渲染函数还会接收一个额外的 context
参数,为没有实例的函数组件提供上下文信息。
怎么理解单向数据流
父组件时通过prop把数据传递到子组件的,但是这个prop只能由父组件修改,子组件修改会报错。子组件想修改时,只能通过$emit派发一个自定义事件,父组件接到后,由父组件修改。
生命周期
主要有8个阶段
①beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
②created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el
属性目前不可见。
③beforeMount:在挂载开始之前被调用:相关的 render
函数首次被调用。该钩子在服务器端渲染期间不被调用。
④mounted:el
被新创建的 vm.$el
替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted
被调用时 vm.$el
也在文档内。
注意 mounted
不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted
:mounted: function () { this.$nextTick(function () {
⑤beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。
⑥updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
注意 updated
不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated
:updated: function () { this.$nextTick(function () { 该钩子在服务器端渲染期间不被调用。
⑦beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
⑧Destoryed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
组件间的通信
1.父向子传递数据是通过props,子向父通过events(emits)
2.通过父链子链也可以(parent/$children)
3.ref也可以访问组件实例,provide/inject API
4.兄弟通信通过Bus和Vuex
5.跨级通信通过Bus和Vuex 和provide/inject API
路由的跳转方式
1.通过<router-link to="home">,router-linker标签渲染为<a>标签,在template中的跳转都是用这种。
2.另一种是边城式导航,也就是通过JS跳转,比如router.push('/home')。
Vue.js 2.x 双向绑定原理
核心的API是通过Object.defineProperty()来劫持各个属性的setter/getter,在数据变动时发布消息给订阅者,触发相应的监听回调,这就是为什么不支持IE8的原因。
MVVM与MVC有什么区别
MVVM模式是由经典的软件架构MVC衍生来的。当View(视图层)变化时,会自动更新到ViewModel(视图模型)。反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系,于MVC不同的是,他没有Controller层,而是演变为ViewModel。
ViewModel通过双向绑定数据把View层和Model层连接起来,而View和Model之间的同步工作是由Vue.js完成的,我们不需要手动操作DOM,只需要维护好数据状态。