乐趣区

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

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. 轻量级的框架
  2. 双向数据绑定
  3. 指令
  4. 插件化

长处: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 等几种框架中的一种,你会怎么抉择,根据是什么?

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