设为首页 加入收藏

TOP

Vue.js常见问题(二)
2019-09-17 18:48:15 】 浏览:53
Tags:Vue.js 常见问题
ition> <keep-alive> <component :is="view"></component> </keep-alive> </transition>

注意:<keep-alive>是用在其一个直属的子组件被开关的情形。如果你在其中有v-for则不会工作。如果有上述的多个条件性的子元素,<keep-alive>要求同时只有一个子元素被渲染。

Vuex中mutations和actions的区别

actions可以执行异步,actions调用mutations,而mutations来修改store。

Render函数

类型:(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 () { // Code that will run only after the // entire view has been rendered }) } 该钩子在服务器端渲染期间不被调用。

⑤beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。

⑥updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated:updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }该钩子在服务器端渲染期间不被调用。

⑦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,只需要维护好数据状态。

首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇element-ui组件中的input等的chan.. 下一篇html.css.

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目