Vue面试总结

最新推荐文章于 2023-10-17 15:42:08 发布

庚中

最新推荐文章于 2023-10-17 15:42:08 发布

阅读量399

点赞数 4

分类专栏：十二.vue 文章标签：前端面试思路总结

本文链接：https://blog.csdn.net/xiaodi520520/article/details/86556953

版权

十二.vue 专栏收录该内容

60 篇文章 6 订阅

订阅专栏

一.vue面试题目

1.请说一下,vue双向数据绑定的原理?

答:
我发现input有一个事件叫oninput事件(onchange是值改变,同时失去焦点才触发),这个事件是值改变马上触发,在事件中,可以把input的value值赋值给数据对象的响应式属性,它触发了Object.defineProperty设置的set方法, 我查看了一下vue官方文档,文档提示了Vue响应式原理利用的刚好是利用了Object.defineProperty()方法,这个方法有三个参数(参数1:目标对象参数2:需定义或修改的属性的名字参数3:目标属性所拥有的特性),通过查阅文档发现它是es5推出的,这也说明了为什么vue在低版本的ie不支持的原因,这个defineProperty方法的作用是为某个对象增加一个属性,第三个参数可以增加(get和set方法),这两个方法的触发时机不同,get是取值的时候触发,set是赋值的时候触发,而vue在input标签中刚好增加了一个v-model属性,在set方法中,我们可以把在对象里的属性值赋值进去,同时也在set这个方法中同时修改所有带有v-text的dom元素的文本,这样就实现了双向数据绑定.
这种观察数据改变然后执行自定义逻辑的编码方式我发现其实是一种设计模式,叫做观察者模式,我试着去学了一下这个模式有点不得要领 ,但是我发现我之前很多的代码用到了工厂模式()生产对象的函数)

效果图:
在这里插入图片描述
代码结合效果图:

附源代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" v-model />
    <h2 v-text></h2>
    <h2 v-text></h2>
  </body>
</html>
<script>
  //声明一个空对象
  let data = {};
  //用defineProperty设置一个可以观察改变的属性,Object.defineProperty(obj, prop, descriptor)参数1:目标对象 参数2:需定义或修改的属性的名字 参数3:目标属性所拥有的特性
  Object.defineProperty(data, 'message', {
    //取值的时候触发
    get() {
      console.log('取值啦') //data.message时会触发这里的内容
      return message
    },
    // 赋值的时候触发
    set(value) {
      console.log('赋值啦') //控制台data.message="11"时触发了这里的内容
      console.log(value) //打印data.message="11"设置的值11
      message = value
      document.querySelector('[v-model]').value = message //在input标签里将message值赋值进去

      // 同步所有v-text的值
      let arr = document.querySelectorAll('[v-text]') //获取所有的h2标签
      arr.forEach(el => {
        el.innerText = message
      })
    }
  });

  // 而onchange 值改变 文本框的话 失去焦点的时候触发
  document.querySelector('[v-model]').oninput = function() {
    console.log('我被触发了')
    console.log(this) //input这个dom元素

    data.message = this.value
  };
</script>

defineProperty方法查阅资料: 在这里插入图片描述

Object.definedProperty()方法介绍:可以设置或修改对象中的属性

Object.defineProperty(对象，修改或新增的属性名，{
		value:修改或新增的属性的值,
		writable:true/false,//如果值为false 不允许修改这个属性值
		enumerable: false,//enumerable 如果值为false 则不允许遍历
        configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})

<body>
	<input type="text" name="" id="mytext">
	<p id="txt"></p>
</body>
</html>
<script type="text/javascript">
	
	let obj={}
	document.addEventListener('keyup',(e)=>{
		obj.txt=e.target.value
		// console.log(obj)
	})

	Object.defineProperty(obj,'txt',{
		get(){
			return obj;
		},
		set(value){
			console.log(value)
			document.querySelector("#txt").innerHTML=value //目前单向
			document.querySelector("#mytext").value=value //再加一个就是双向了
		}
	})
</script>

最精简代码和解释:
解释:Vue.js 采用的是数据劫持+发布/订阅模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter/getter，在数据变动时发布消息给订阅者（Wacther）, 触发相应的监听回调。

  <body>
    <input type="text" id="text">
    <p id="showTxt"></p>
    <script>
    //1.定义一个对象
    //2.添加一个监听方法
    //3.使用Object.defineProperty()方法
    let obj={}
    document.addEventListener('keyup',function(e){
        console.log(e);
        
        obj.txt=e.target.value;
    });
    Object.defineProperty(obj,'txt',{
        get:()=>{
            return obj;
        },
        set:(newValue)=>{
            document.querySelector('#text').value=newValue;
            document.querySelector('#showTxt').innerHTML=newValue;//注意这里是innerHTML
        }
    })
    </script>
</body>

2.请详细说下Vue生命周期的理解?

答:
Vue生命周期总共分为8个阶段,分别是:
create:Vue实例创建前后;(创建前后)
mount:Vue实例把数据跟Dom元素关联起来前后;(载入前后)
update:Vue实例data更新同步到Dom上前后;(更新前后)
destroy:Vue实例销毁前后;(销毁前后)
详细如下:(未完待续)

1.在beforeCreated阶段:vue实例的挂载元素$el和数据对象data都为undefined,还未初始化;在created阶段:vue实例的数据对象data有了,但'$el'还没有;
2.在mounted阶段,vue实例挂载完成,data.message成功渲染;
3.update更新前/后,当data变化时,会触发beforeUpdate和updated方法;
4.销毁前/后,在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听已经和dom的绑定,但是dom结构依然存在.

3.请问看过Vue源码吗?体会是什么?

答:看过,当时是直接下载github的源码,一看有点找不着北,我当时下载的原因主要是想弄懂双向数据绑定原理,就以这个为出发点找到了Object.defineProperty,发现里面有get和set这两个方法,当时我在用Vuex的使用就碰到了这么一个坑点:我们自己动态添加的属性是无法跟踪的,用控制台打印发现没有get和set方法,查阅文档才发现主要是调用Vue.set才可以,直到我看了源码发现果然内容有Object.defineProperty.

庚中

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue面试总结

一.vue面试题目1.请说一下,vue双向数据绑定的原理?我查看了一下vue官方文档,文档提示了Vue响应式原理利用的是Object.defineProperty()方法,通过查阅文档发现它是es5推出的,这也说明了为什么vue在低版本的ie不支持的原因,实际vue是兼容到ie8以上,这个defineProperty方法的作用是为某个对象增加一个属性,同时可以增加(get和set方法),这两个...
复制链接

扫一扫

专栏目录