超人
超人
![](https://static.vue-js.com/3a119e10-3aca-11eb-85f6-6fac77c0c9b3.png) ## 一、生命周期是什么 生命周期`(Life Cycle)`的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”`(Cradle-to-Grave)`的整个过程在`Vue`中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线,每个工人(生命周期)站在各自的岗位,当任务流转到工人身边的时候,工人就开始工作PS:在`Vue`生命周期钩子会自动绑定 `this` 上下文到实例中,因此你可以访问数据,对 `property` 和方法进行运算这意味着**你不能使用箭头函数来定义一个生命周期方法** \(例如 `created: () => this.fetchTodos()`\) ## 二、生命周期有哪些 Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后,以及一些特殊场景的生命周期 | 生命周期 | 描述 | | :-- | :-- | | beforeCreate...
![](https://static.vue-js.com/7de50d20-3aca-11eb-85f6-6fac77c0c9b3.png) ## 一、组件间通信的概念 开始之前,我们把**组件间通信**这个词进行拆分 - 组件 - 通信 都知道组件是`vue`最强大的功能之一,`vue`中每一个`.vue`我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上,任何信息的交通都是通信**组件间通信**即指组件\(`.vue`\)通过某种方式来传递信息以达到某个目的举个栗子我们在使用`UI`框架中的`table`组件,可能会往`table`组件中传入某些数据,这个本质就形成了组件之间的通信 ## 二、组件间通信解决了什么 在古代,人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递,到了今天,随着科技水平的飞速发展,通信基本完全利用有线或无线电完成,相继出现了有线电话、固定电话、无线电话、手机、互联网甚至视频电话等各种通信方式从上面这段话,我们可以看到通信的本质是信息同步,共享回到`vue`中,每个组件之间的都有独自的作用域,组件间的数据是无法共享的但实际开发工作中我们常常需要让组件之间共享数据,这也是组件通信的目的要让它们互相之间能进行通讯,这样才能构成一个有机的完整系统 ## 二、组件间通信的分类 组件间通信的分类可以分成以下 - 父子组件之间的通信 - 兄弟组件之间的通信 - 祖孙与后代组件之间的通信 - 非关系组件间之间的通信 关系图: ![](https://static.vue-js.com/85b92400-3aca-11eb-ab90-d9ae814b240d.png) ## 三、组件间通信的方案 整理`vue`中8种常规的通信方案 1. 通过...
> 作者` `这里笔误了,应该为 ` ` 感谢指正
> 直接用export和import也行,而且还不用管爸爸儿子,爷爷,大爷,侄子,孙子.是这种方法有问题吗?为啥你们都不提的? 注意看题,是通信,不是引用。。
![image.png](https://static.vue-js.com/a502dde0-3acc-11eb-ab90-d9ae814b240d.png) ## 一、直接添加属性的问题 我们从一个例子开始 定义一个`p`标签,通过`v-for`指令进行遍历 然后给`botton`标签绑定点击事件,我们预期点击按钮时,数据新增一个属性,界面也 新增一行 ```html {{ value }} 动态添加新属性 ``` 实例化一个`vue`实例,定义`data`属性和`methods`方法 ```js const app = new Vue({ el:"#app", data:()=>{ item:{ oldProperty:"旧属性" } }, methods:{ addProperty(){ this.items.newProperty =...
## 面试官:为什么data属性是一个函数而不是一个对象? ![image.png](https://static.vue-js.com/83e51560-3acc-11eb-85f6-6fac77c0c9b3.png) ## 一、实例和组件定义data的区别 `vue`实例的时候定义`data`属性既可以是一个对象,也可以是一个函数 ```js const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } } }) ``` 组件中定义`data`属性,只能是一个函数 如果为组件`data`直接定义为一个对象...
![](https://static.vue-js.com/cf6aa320-3ac6-11eb-85f6-6fac77c0c9b3.png) ## 一、什么是SPA SPA(single-page application),翻译过来就是单页应用`SPA`是一种网络应用程序或网站的模型,它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验在单页应用中,所有必要的代码(`HTML`、`JavaScript`和`CSS`)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载,也不会将控制转移到其他页面举个例子来讲就是一个杯子,早上装的牛奶,中午装的是开水,晚上装的是茶,我们发现,变的始终是杯子里的内容,而杯子始终是那个杯子结构如下图 ![](https://static.vue-js.com/df14a5a0-3ac6-11eb-85f6-6fac77c0c9b3.png) 我们熟知的JS框架如`react`,`vue`,`angular`,`ember`都属于`SPA` ## 二、SPA和MPA的区别 上面大家已经对单页面有所了解了,下面来讲讲多页应用MPA(MultiPage-page application),翻译过来就是多页应用在`MPA`中,每个页面都是一个主页面,都是独立的当我们在访问另一个页面的时候,都需要重新加载`html`、`css`、`js`文件,公共文件则根据需求按需加载如下图 ![](https://static.vue-js.com/eeb13aa0-3ac6-11eb-85f6-6fac77c0c9b3.png) #### 单页应用与多页应用的区别 | | 单页面应用(SPA) | 多页面应用(MPA) | | :-- | :-- | :-- | | 组成 |...
@fangaofeng 请提供详情的错误内容,截图最好
![image](https://user-images.githubusercontent.com/9276376/30423689-3a636842-9976-11e7-85d8-ca52184ecdcd.png) sorry,项目已经不维护了,
@zsf513 确定有这个问题,见issue[23](https://github.com/febobo/react-native-redux-FeInn/issues/23)