哈罗面试准备

最新推荐文章于 2021-09-09 15:02:02 发布

104g惊蛰

最新推荐文章于 2021-09-09 15:02:02 发布

阅读量169

点赞数 1

文章标签：面试

原文链接：https://zhuanlan.zhihu.com/p/88648401

版权

1、为什么学前端？怎么学的？学了多久？

读大学时我的专业是计算机科学与技术，然后我又读了计算机计算机技术的研究生，在这几年的学习过程中，我了解和接触到了计算机行业，然后我比较喜欢和擅长前端方面，所以我选择学前端。

在大学的时候，学过前端方面的基础内容，比如HTML，javaweb等，做毕设的时候，自己看书和查阅资料，边学边做了毕设，之后从今年2月份开始，通过看视频网课以及做项目的方式进行学习。

从今年2月份开始。

2、说说自己的项目，项目遇到的问题？

做项目的过程中会遇见不少问题，尤其是刚上手的时候，我一般会在Chrome自带的控制台进行调试，出现问题自己无法解决的时候就复制错误信息，到百度里去搜索解决方法，如果还不能解决就去谷歌或者github。

前端开发过程中经常遇到的问题以及对应解决方法 (持续更新)_一入前端深似海的博客-CSDN博客_前端开发遇到的问题及解决方法

1：vue项目中，有一次我用用v-for 循环本地图片，图片不显示，解决办法：使用require动态引入图片，或将图片放static文件夹里面

还有一次我做登录主页的时候，当时做这样一个功能，如果用户没有登录就访问主页，就要强制返回登录界面，当时写好代码后，还是能一下子就访问到主页，然后检查了之后发现竟然是忘记清除浏览器存储的cookie了。

3v-for、v-if

在处于同一节点的时候，v-for优先级比v-if高，这意味着v-if将分别重复运行于每个v-for循环中。即先运行v-for的循环，然后在每一个v-for的循环中，再进行v-if判断。所以不推荐v-if和v-for同时使用。会很浪费性能，我们正确的做法应该是再v-for的外面新增一个模板标签template，在template上使用v-if

v-for用法vue v-for循环的用法 - wangyfax - 博客园 (cnblogs.com)

1、v-for循环普通数组

①创建vue对象

②循环数据

结果

2、v-for循环对象数组

①创建vue实例对象

②循环对象数组

结果

3、v-for循环对象

①创建vue对象实例

②循环对象

结果：

4、v-for循环数字

①创建vue对象实例

②循环数字

结果：

5、v-for中key的使用方式

①创建vue对象实例

注意：push()方法一般是添加到数组的最后的位置；unshift()方法是往最前面的位置添加

②循环

注意：

v-for循环的时候，key属性只能使用number或string

key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值

在组件中使用v-for循环的时候，或者在一些特殊的情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型：key值。

结果：

v-ifvue中v-if的常见使用_马优晨-CSDN博客

1-多个元素，通过条件判断展示或者隐藏某个元素。或者多个元素

2-进行两个视图之间的切换

第一个实例实现了 type等于不同值，A，B，C 三个元素的展示情况。
第二个例子实现了，点击按钮实现两个视图的切换。

<!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>Vue中v-if的常见使用</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){

    //创建一个vue实例
    var app = new Vue({
        el: '#app',
        data: {
            type:'C',
            loginType:'username'
        },
        methods:{
            changeloginType(){
                let self = this;
                if(self.loginType=='username'){
                    self.loginType = ''
                }else{
                    self.loginType = 'username'
                }
            }
        }
    })
}

</script>
<body>
    <div id="app">
        <div style="color:red">v-if的简单实用</div>
        <template>
            <div v-if="type == 'A'">
                A
            </div>
            <div v-else-if="type=='B'">
                B
            </div>
            <div v-else>
                C
            </div>
        </template>
        <div style="color:green">v-if的弹框切换</div>
        <template v-if="loginType === 'username'">
            <label>用户名：</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>密码：</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
        <button @click="changeloginType">切换状态</button>
    </div>
</body>
</html>

这里写图片描述

4、vue双向绑定

如何理解vue数据双向绑定原理 - 知乎 (zhihu.com)

Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否需要更新，若要更新就会执行对应的更新函数从而更新视图

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性，如果属性发生变化了，就告诉订阅者watcher看是否需要更新，因为订阅者有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者watcher之间进行统一管理的。接着，我们还需要有一个指令解析器compile，对每个节点元素进行扫描和解析，将相关指令（如v-model，v-on）对应初始化成一个订阅者watcher，并替换模板数据或者绑定相应的函数，此时当订阅者watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图

三个步骤

实现一个监听器Observer，用来劫持监听所有属性，如果有变动的，就通知watcher订阅者

实现一个订阅者watcher，每个watcher都绑定一个更新函数，watcher可以收到属性的变化通知书并执行相应的函数，从而更新视图

实现一个解析器compile，可以扫描和解析每个节点的指令（v-model，v-on等指令），如果节点存在v-model、v-on等指令，则解析器compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（watcher）

5、响应式原理

最简化 VUE的响应式原理 - 知乎 (zhihu.com)

响应式原理意思是在改变数据的时候，视图会跟着更新。这意味着你只需要进行数据管理，给我们搬砖提供了很大的便利。

Object.defineProperty

这个方法就是在一个对象上定义了一个新的属性，或者改变一个对象现有的属性，并且返回这个对象。里面有set、get两个字段。顾名思义，set都是取设置属性的值，而get就是获取属性的值

// 在对象中添加一个属性与存取描述符的示例
var bValue;
var o = {};
Object.defineProperty(o, "b", {
  get : function(){
    console.log('监听正在获取b')
    return bValue;
  },
  set : function(newValue){
    console.log('监听正在设置b')
    bValue = newValue;
  },
  enumerable : true,
  configurable : true
});

o.b = 38;
console.log(o.b)

最终打印

监听正在设置b
监听正在获取b
38

从上诉的例子中，可以看到我们对o.b赋值38的时候，就会调用set函数，这时候给bValue赋值，之后我们就可以通过o.b来获取这个值，这个时候，get函数被调用

此时可以实现一个极简的vue双向绑定了

<input type="text" id="txt" />
<span id="sp"></span>

<script>
var txt = document.getElementById('txt'),
    sp = document.getElementById('sp'),
    obj = {}

// 给对象obj添加msg属性，并设置setter访问器
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg  当obj.msg反生改变时set方法将会被调用  
  set: function (newVal) {
    // 当obj.msg被赋值时 同时设置给 input/span
    txt.value = newVal
    sp.innerText = newVal
  }
})

// 监听文本框的改变 当文本框输入内容时 改变obj.msg
txt.addEventListener('keyup', function (event) {
  obj.msg = event.target.value
})
</script>

VUE给data里所有的属性加上set,get这个过程就叫做Reactive化。

观察者模式

104g惊蛰

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
哈罗面试准备

1、为什么学前端？怎么学的？学了多久？读大学时我的专业是计算机科学与技术，然后我又读了计算机计算机技术的研究生，在这几年的学习过程中，我了解和接触到了计算机行业，然后我比较喜欢和擅长前端方面，所以我选择学前端。在大学的时候，学过前端方面的基础内容，比如HTML，javaweb等，做毕设的时候，自己看书和查阅资料，边学边做了毕设，之后从今年2月份开始，通过看视频网课以及做项目的方式进行学习。从今年2月份开始。2、说说自己的项目，项目遇到的问题？做项目的过程中会遇见不少问题，尤其是刚上手的时
复制链接

扫一扫