vue的相关面试题

2020-07-07 18:07:57 阅读：271 来源： 互联网

1、VUE实现双向数据绑定的原理？

Vue 实现双向数据绑定主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）的 set 和 get，在数据变动时发布消息给订阅者触发监听。

Object.defineProperty( )是用来做什么的？它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set.如果还不熟悉其用法，请点击这里阅读更多用法。

代码例子：

var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
  set: function (value) {
    name = value;
    console.log('你取了一个书名叫做' + value);
  },
  get: function () {
    return '《' + name + '》'
  }
})
 
Book.name = 'vue权威指南';  // 你取了一个书名叫做vue权威指南
console.log(Book.name);  // 《vue权威指南》

2、vuex和localStorage、sessionStorage 区别？

Vuex是什么，官网介绍说Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。我的理解就是Vuex就是类似于sessionStorage这样管理数据(本地存和取)的一种技术方案。

localStorage存储的值能够永久的存储在浏览器上。不管是重新打开新窗口还是重启，同一个浏览器上的相同域名下，localStorage的值一直在。
sessionStorage存储的值依赖于当前窗口(当前会话), 只要当前窗口不关闭，它存储的数据就一直在。一旦关闭窗口或者打开新窗口，sessionStorage之前存储的数据就会消失。
相比localStorage和sessionStorage，vuex存储的数据可以即时更新到，当前项目下的所有引用了该数据的组件。但是如果刷新页面的话，vuex存储的值会重置，而localStorage和sessionStorage存储的值不会重置。

3、说一下路由钩子在vue生命周期的体现

Vue的生命周期钩子

beforeCreate 创建前状态

created 创建完毕状态

beforeMount 挂载前状态

mounted 挂载结束后状态

beforeUpdate 组件更新之前状态

updated 组件更新之后状态

beforeDestroy 组件销毁之前调用

destroyed 组件销毁后调用

<body>
   <div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{ msg }}</h3>
  </div>
  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        show() {
          console.log('执行了show方法')
        }
      },
      beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
        console.log(this.msg)
        this.show()
        // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
      },
      created() { // 这是遇到的第二个生命周期函数
        console.log(this.msg)
        this.show()
        //  在 created 中，data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
      },
      beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
        console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
      },
      mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
        console.log(document.getElementById('h3').innerText)
        // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
      },
      // 接下来的是运行中的两个事件
      beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
         console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg) 
        // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
      },
      updated() {
        console.log('界面上元素的内容：' +     document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg)
        // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最    新的
      }
    });
  </script>
</body>

　4、计算属性和普通属性的区别？　

1)methods方法和computed计算属性，两种方式的最终结果确实是完全相同

2)不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，多次访问 计算属性会立即返回之前的计算结果，而不必再次执行函数。

3)methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。

4)官网的一句话：对于任何复杂逻辑，你都应当使用计算属性。

　5、描述下自定义指令？

1、先了解一下,在 vue 中,有很多内置的指令.

比如:

v-for 用于遍历
v-if & v-show 用于隐藏和显示元素(区别在于后者是修改 display:block|none,前者是不创建把元素从dom中删除或者创建.
v-bind: 属性绑定,把数据绑定在HTML元素的属性上.
v-html & v-text 把数据绑定在HTML元素的属性上,作用同 innerHTML & innerText
v-on: 绑定HTML元素事件
v-if & v-else-if & v-else 条件渲染
v-model 绑定表单元素,实现双向绑定.
等等.....

所以,关于指令,我们可以总结下面几点:

指令是写在 HTML 属性地方的.<input v-model='name' type='text' />
指令都是以 v- 开头的.
指令表达式的右边一般也可以跟值 v-if = false

// 2.Vue自定义指令场景小DEMO


// 和自定义过滤器一样,我们这里定义的是全局指令
Vue.directive('focus',{
    inserted(el) {
      el.focus()
    }
})
<div id='app'>
    <input type="text">
    <input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点">
  </div>

这里放了两个 input ,但是后面的 input 才使用了我们的自定义 v-focus 指令,所以看到了是后面那个文本框获取了焦点,而不是前面一个.

先总结几个点:

使用 Vue.directive() 来新建一个全局指令,(指令使用在HTML元素属性上的)
Vue.directive('focus') 第一个参数focus是指令名,指令名在声明的时候,不需要加 v-
在使用指令的HTML元素上,<input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点"/> 我们需要加上 v-.
Vue.directive('focus',{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数.
el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input
el 就等价于 document.getElementById('el.id')....
可以利用 $(el) 无缝连接 jQuery

标签：面试题,vue,console,log,Vue,指令,相关,数据,属性
来源： https://www.cnblogs.com/shuijingcao/p/13262274.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue的相关面试题

// 2.Vue自定义指令场景小DEMO