关于面试:前端常见面试题框架部分五

1.vue 相熟吗，说一下 vue 计算属性与监听属性的区别？

computed 计算属性在数据未发生变化时，优先读取缓存，只有在相干的数据发生变化时才会扭转要计算的属性。

watch 监听属性会实时监听数据变动，数据每次有变动都去执行函数。

举个例子



1.  <div id="app">
    
2.      <input type="text" v-model="firstName">
    
3.      <input type="text" v-model="lastName">
    
4.      <input type="text" v-model="fullName">
    
5.  </div>
    
6.  <script>
    
7.   new Vue({
    
8.    el: '#app',
    
9.    data: {
    
10.      firstName: 'Micheal',
    
11.      lastName: 'Jackson',
    
12.      fullName: 'Micheal Jackson'
    
13.    },
    
14.    watch: {15.      firstName: function (val) {
    
16.        this.fullName = val + ' ' + this.lastName
    
17.      },
    
18.      lastName: function (val) {
    
19.        this.fullName = this.firstName + ' ' + val
    
20.      }
    
21.    },
    
22.    computed:{23.      fullName:function(){
    
24.        return  this.firstName  + " " +this.lastName;
    
25.      }
    
26.    }
    
27.  })
    
28.  </script>

在此案例中，如果 fullname 扭转并不会触发计算属性的执行，只有当 fullname 中监测的 firstname 或 lastname 其中之一扭转时才会触发；而监听属性，当监听的属性扭转时就会触发。

*2.vue 如何在父子组件之间传输数据？*

父组件能够通过 props 属性来给子组件传递数据。留神：名字模式为驼峰式（例如 camelCase）的 prop 用作个性时，须要转为短横线隔开（camel-case）。



1.  <div id="app">
    
2.      <v-div v-for="nav in navs" :navdata="nav"></v-div>
    
3.      <v-div2 v-for="nav in navs" :nav-data="nav"></v-div2>    <!-- 短横线隔开 -->
    
4.  </div>
    
5.  <script>
    
6.      Vue.component('v-div',{7.          props: ["navdata"],
    
8.          template: '<div>{{navdata.id}}--{{navdata.navName}}</div>'
    
9.      });
    
10.      Vue.component('v-div2',{11.          props: ["navData"],    // 驼峰式
    
12.          template: '<div>{{navData.id}}--{{navData.navName}}</div>'
    
13.      });
    

15.      new Vue({
    
16.          el: "#app",
    
17.          data: {18.              navs: [{id:1,navName:"手机"},{id:2,navName:"电脑"},{id:3,navName:"游戏机"}]
    
19.          }
    
20.      });
    
21.  </script>

子组件要把数据传递给父组件，就须要应用自定义事件通过 this.$emit() 来调用组件下面的自定义事件，并向事件办法传递数据，这样距实现了通过事件把数据传递给 vue 实例中的办法。



1.  <div id="app">
    
2.      <v-btn v-on:abc="a"></v-btn>    <!--v-on: 自定义事件名称 ="办法名称"-->
    
3.  </div>
    
4.  <script>
    
5.      Vue.component('v-btn',{
    
6.          methods: {7.              b: function () {8.                  alert("b 函数执行");
    
9.                  this.$emit("abc",123);  //this.$emit("自定义事件名称", 数据 1，数据 2,……)
    
10.              }
    
11.          },
    
12.          template: "<button v-on:click='b()'> 按钮 </button>"
    
13.      });
    

15.      new Vue({
    
16.          el: "#app",
    
17.          methods: {18.              a: function (d) {19.                  alert("传输的数据是"+d);
    
20.              }
    
21.          }
    
22.      });
    
23.  </script>

子组件能够用 this.$parent 拜访它的父组件。根实例的后辈能够用 this.$root 拜访它。父组件有一个数组 **this.$childre**n，蕴含它所有的子元素。

只管能够拜访父链上任意的实例，不过子组件该当防止间接依赖父组件的数据，尽量显式地应用 props 传递数据。

3.说一下你认为的应用 vue 框架的优缺点**

Vue.js 是一个构建数据驱动的 Web 界面的库，它只聚焦于视图层。

Vue.js 的个性如下：

轻量级的框架
双向数据绑定
指令
插件化

长处：1. 简略：官网文档很清晰，比 Angular 简略易学。

2. 疾速：异步批处理形式更新 DOM。

3. 组合：用解耦的、可复用的组件组合你的应用程序。

4. 紧凑：~18kb min+gzip，且无依赖。

5. 弱小：表达式 & 无需申明依赖的可推导属性 (computed properties)。

6. 对模块敌对：能够通过 NPM、Bower 或 Duo 装置，不强制你所有的代码都遵循 Angular 的各种规定，应用场景更加灵便。

毛病：1. 不是很成熟：Vue.js 是一个新的我的项目，没有 angular 那么成熟。

2. 影响度不是很大：google 了一下，有对于 Vue.js 多样性或者说丰富性少于其余一些有名的库。

3. 不反对 IE8

4.vuex 个别在什么类型我的项目中会用到？

Vuex 是一个专为 Vue.js 利用程序开发的 状态管理模式。

Vuex 实用于构建中大型单页利用，多组件嵌套，逻辑简单须要传值的我的项目。

vuex 官网文档链接：https://vuex.vuejs.org/zh/

5.react 都有哪些生命周期，个别在什么时候用？

组件的生命周期分为三种状态，别离为：

Mounting：已插入实在 DOM（初始化，标签被 render 办法渲染到页面中）
Updating：正在被从新渲染（更新，在页面中通过给标签绑定事件，来更改 props 或 state 的值，组件从新调用 render 办法的过程）
Unmounting：已移出实在 DOM（销毁，页面中组件事件的切换，一个组件被另一个组件替换的时候）

每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()：在渲染前调用, 在客户端也在服务端。
componentDidMount()：在第一次渲染后调用，只在客户端。
componentWillUpdate(object nextProps, object nextState)：在组件接管到新的 props 或者 state 但还没有 render 时被调用。在初始化时不会被调用。
componentDidUpdate(object prevProps, object prevState)：在组件实现更新后立刻调用。在初始化时不会被调用。
componentWillUnmount()：在组件从 DOM 中移除的时候立即被调用。

此外，React 还提供两种非凡状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：在组件接管到新的 props 或者 state 时被调用。在初始化时或者应用 forceUpdate 时不被调用。返回一个布尔值，为 true 时从新渲染，为 false 时不从新渲染。

组件的生命周期图如下：

6.react 如何在父子组件之间传输数据？

父组件给子组件传递数据（或办法）次要应用 props。案例：

父组件传递数据 user。



1.  import React, {Component} from 'react';
    
2.  import logo from './logo.svg';
    
3.  import './App.css';
    
4.  import Main from './Main.js';
    

6.  class App extends Component {7.    constructor(props) {8.      super(props);
    
9.      this.user = {name: '小明', age: 19, sex: '男'};
    
10.    }
    
11.    myClick(sex, e) {
    
12.      e.target.style.color = "red";
    
13.      alert('性别为' + sex);
    
14.    }
    
15.    render() {
    
16.      return (
    
17.        <div className="App">
    
18.          <Main user={this.user} myClick={this.myClick.bind(this,this.user.sex)}></Main>
    
19.        </div>
    
20.      );
    
21.    }
    
22.  }
    

24.  export default App;

在子组件 Main 中接收数据



1.  import React, {Component} from 'react';
    

3.  class Main extends Component {4.      render() {
    
5.          return (
    
6.              <div>
    
7.                  <p onClick={this.props.myClick}> 姓名：{this.props.user.name}</p>
    
8.                  <p> 年龄：{this.props.user.age}</p>
    
9.              </div>
    
10.          );
    
11.      }
    
12.  }
    

14.  export default Main;

子组件给父组件传递数据，个别是通过 state 来传递数据。案例：

父组件通过 changePh()办法接收数据，而后更新 state：



1.  import React, {Component} from 'react';
    
2.  import logo from './logo.svg';
    
3.  import './App.css';
    
4.  import Main from './Main.js';
    

6.  class App extends Component {7.    constructor(props) {8.      super(props);
    
9.      this.state = {phone: ''};
    
10.    }
    
11.    changePh(e) {12.      this.setState({ phone: e.target.value});
    
13.    }
    
14.    render() {
    
15.      return (
    
16.        <div className="App">
    
17.          <Main changePh={this.changePh.bind(this)}></Main>
    
18.          <p>{this.state.phone}</p>
    
19.        </div>
    
20.      );
    
21.    }
    
22.  }
    

24.  export default App;

子组件承受父组件的 changePh()办法，将文本框的 value 传递过来：



1.  import React, {Component} from 'react';
    

3.  class Main extends Component {4.      render() {
    
5.          return (
    
6.              <div>
    
7.                  <p> 电话号码：<input type="text" onChange={this.props.changePh}/></p>
    
8.              </div>
    
9.          );
    
10.      }
    
11.  }
    

13.  export default Main;

7.应用 react 须要加载那些文件，他们的作用是什么？

react.js 外围组件库

react-dom.js 对于 DOM 元素操作的办法

Browser.js 解析 jsx 语法

8. 说一下你认为的应用 react 框架的优缺点

React个性如下：

1. 申明式设计：React 采纳申明范式，能够轻松形容利用。

2. 高效：React 通过对 DOM 的模仿，最大限度地缩小与 DOM 的交互。

3. 灵便：React 能够与已知的库或框架很好地配合。

长处：1. 速度快：在 UI 渲染过程中，React 通过在虚构 DOM 中的微操作来实现对理论 DOM 的部分更新。

2. 跨浏览器兼容：虚构 DOM 帮忙咱们解决了跨浏览器问题，它为咱们提供了标准化的 API，甚至在 IE8 中都是没问题的。

3. 模块化：为你程序编写独立的模块化 UI 组件，这样当某个或某些组件呈现问题是，能够不便地进行隔离。

4. 单向数据流：Flux 是一个用于在 JavaScript 利用中创立单向数据层的架构，它随着 React 视图库的开发而被 Facebook 概念化。

5. 同构、纯正的 javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行，预渲染你的利用有助于搜索引擎优化。

6. 兼容性好：比方应用 RequireJS 来加载和打包，而 Browserify 和 Webpack 实用于构建大型利用。它们使得那些艰巨的工作不再让人望而却步。

毛病：React 自身只聚焦视图层，并不是一个残缺的框架，所以如果是大型项目想要一套残缺的框架的话，根本都须要加上 ReactRouter 和 Flux 能力写大型利用。

9. 如果要搭建一个我的项目，让你抉择应用 vue/react/angular 等几种框架中的一种，你会怎么抉择，根据是什么？

我的项目的大小类型，angular 实用于大型项目，react 实用于大中型我的项目，vue 实用于小中型我的项目。
看哪种框架的成熟度高，比方 UI 框架是否欠缺，可是应用插件多少，框架降级迭代速度快慢。
看公司技术人员对那种框架更认可。

关于面试:前端常见面试题框架部分五

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）