vue
vue是如何引入到页面中的？
- 在html中导包
- 在JavaScript中用包，其本质就是：构造函数传入一个参数，实例化出来一个对象
路由跳转,点击button跳转页面 怎么实现
可以在按钮上绑定一个方法,用this.$router.push('目标路由')直接实现路由的跳转
图片懒加载的原理,懒加载的原理,
图片就是一个标签,浏览器是否发起请求图片是根据
的src属性,
vue 的双向绑定原理
通过数据劫持结合发布者-订阅者模式的方法,通过object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调.
我们知道通过Object.defineProperty()可以实现数据劫持，是的属性在赋值的时候触发set方法，在得到属性，会触发get方法.
observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。
compile的目的就是解析各种指令称真正的html。
v-for中key值的作用
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们， 比如有一组节点,要在其中插入一个新的节点,diff算法默认执行的是把他们都对比一遍,在要插入的地方替换之前的节点,后面的节点都要依次替换,之后再插入最后一个节点,这样很浪费性能,没有效率,然后就用key给每个节点做一个唯一的标识,diff算法就可以正确的识别此节点,找到正确的区域插入新的节点,不用一个个替换.
<!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>
<script src="./lib/vue.js"></script>
<body>
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<ul>
<li v-for="(item, i) in list" :key=item.id>
<input type="checkbox"> {{item.name}}
</li>
</ul>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name: '',
newId: 3,
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '吕不韦' },
{ id: 3, name: '嬴政' }
]
},
methods: {
add() {
//注意这里是unshift
this.list.unshift({ id: ++this.newId, name: this.name })
this.name = ''
}
}
});
</script>
</div>
</body>
</html>
没有加key值的时候如果选中了李斯,那么当添加了新值进去就会把选中的√打到新添加的值上面去了,只认位置不认人,
加了key值之后,√就认准了李斯,依然打钩在李斯上.
可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果
假如v-for循环中有不想要的数据该怎么办
用过滤器过滤要显示的值,或者结合v-if使用? v-for比v-if 的优先级高
怎么做免登陆
把token信息存到公用的二级或者3级域名下的cookie中.
vue:如果有一个数组,let arr=[1,2,3] arr[0]可以拿到吗,可以用index吗
data中定义的数组,数组里面有对象,假如改变了这个this.数组.对象.属性=值,胡子语法中的值没有改变怎么办;
是因为Object.defineProperty()来劫持各个属性 的setter，getter，但是有一个局限性,监听不到数组的变动,所以用到this.$set.
data中没有定义的量:一些后台返回的数据太大,没有放在data上,但是要渲染到页面,假如返回的是数字,页面上要相对应渲染字符串,该怎么做
组件封装考虑到的问题
子组件可以拿到父组件的方法吗
可以,但不建议.
子组件可以拿到父组件中的对象吗
对vue的理解
1.数据驱动视图,数据更新时不必手动更新视图,不必担心布局更改和类名重复导致的 js 重写,
2.组件化,便于复用和维护.
object.set属性有用过吗,加入要拿到对象里面的值,object.属性可以拿到吗
vue开发的整个流程
在一个钩子里一个值改变时怎么监听的
项目遇到的难点是什么
父子传值,具体怎么实现,
v-model的原理
一个语法糖 v-bind和input事件的结合.
<template>
<div>
<input type="text" :value="text" @input="inputChange">
</div>
</template>
<script>
export default {
data() {
return {
text:"xiaoming",
};
},
methods: {
inputChange(e){
this.text = e.target.value
},
}
vux属性,有哪些方法,vux里定义一个方法,用什么触发
vux和localstorage有什么区别,分别用到哪里,混合一起用到哪里
1.localstorage里的数据不是响应式,数据改变之后视图不会更新
vuex是响应式,里面的数据改变视图会更新
2.vuex页面刷新数据会丢失
localstorage数据持久化
混合一起用在vuex里面的数据持久化 localstorage 避免刷新数据丢失
(如存数据分别存到vux和localstorage,vuex数据更新后再存一下到localstorage,在vuex中拿不到数据后(页面刷新)就在localstorage取出并再存到vuex中
token放在哪里,怎么实现请求拦截响应拦截,可视化
计算属性computer和watch的区别,深度监听都哪里有用到
路由钩子函数有哪些,什么时候用到
比如饿了么ui中的一些组件弹窗,为什么可以用this.$..拿到,因为加入原型,因为render方法?
懒加载原理
怎么判断是否登录
图片懒加载的原理,遇到高度变化怎么办
生命周期钩子函数,用的最多的是,在什么地方用
- 声明方法，直接使用mounted声明一个函数即可
- 执行时机，vue把内部的data和页面的内容初始化完毕并渲染挂载到页面上之后，自动执行mounted生命周期钩子函数
- mounted使用频率还是很高的，当我们碰到需要获取Vue解析的页面的DOM元素节点的时候，基本上都会写在这个钩子函数里
- mounted只会执行一次，就是HTML结构被Vue完全渲染挂载完成后
- 如果data内部的数据发生改变后，DOM被更新后，则需要使用updated这个钩子函数了，updated这个钩子函数会被多次执行
v-show指令和v-if指令的区别是什么？
- v-show指令的功能和v-if一样，都是用于条件性地渲染一块内容
- v-show隐藏元素通过改变元素css属性display:none
- v-if 隐藏元素直接移除dom
- 对于频繁切换隐藏和显示的元素，就用v-show
侦听器watch深度侦听
-
同学们咱们前面学习了侦听器来侦听数据的改变，并执行相应的逻辑。现在我们来对一个对象，只修改其中一个值，这个时候我们监听这个对象会发现并没有调用侦听器，这是为什么呢？
-
这是因为在侦听器里面传入的两个参数，oldVal和newVal保存的都是这个数组对象的索引值，前面同学们学过基础数据类型和复杂数据类型，还记得哪些是原始基础数据类型，哪些是对象数据类型吗？
- 原始类型
- 原始值不可更改原始值的比较也是值的比较比如：var a = 1, b = 1; a == b; //true
- 详细分类
- 数字（number）
- 字符串（string）
- 布尔值（boolean
- null
- undefined
- 对象类型
- 对象是可变的，即值是可以修改的对象的比较并非值得比较
- 比如：var a = [], b = [];a == b; //false，只有在引用相同时，两个只才会相等
- 特殊对象--数组（array），特殊对象--函数（function），object类型
- 原始类型
-
而watch对复杂数据类型，只能监测其是否来自于同一个引用，进而无法实现真正监测的目的，那么我们该怎么做呢？watch给我们提供了一个方法，叫深度侦听
- deep:true
- 执行的方法是handler
- 2个参数都是相同的内存地址，值一样（复杂数据类型）
// 侦听复杂类型数据的时候，传入的参数，是数据的内存地址 // 2个参数的值是一样的 // 基本数据类型2个参数是不同的 // 复杂类型无法通过2个参数进行对比 food: { handler(newVal, oldVal) { console.log(newVal) console.log(oldVal) }, // 开启深度侦听 deep: true }
PS：侦听器是面试最常见的问题之一，面试官一般会问：侦听器用过吗？Vue中你碰到了什么坑?你应该怎么答比较好呢？
- 侦听器，我当时用它来检测数据的改变，执行自定义的逻辑，
- 实现了路由信息改变之后，重新获取数据--搜索页面做的
- 后续有类似的需求也用侦听器挺不错的
- 碰到了一个坑点，复杂类型的侦听，
- 必须要开启深度侦听，才可以检测到内部数据的改变
- 开启深度侦听之后，2个参数给我的值都相同，我本来还想作比较的
- 侦听的时候，精确到对象的属性名就可以避免这个问题了！
- 其实在数据改变时，用updated这个钩子也可以，但是触发的频率比侦听器高
- 除了updated钩子，我还用过这些钩子，比如
- mounted
- created
- axios数据获取
- 抽取axios
ES6
let count var 的区别
let:
1.没有变量提升
2.不能重复声明变量
3.有块级作用域:
if for while等有大括号的都会形成一个作用域,外部无法访问内部声明的变量;
var:
1.有变量提升
2.可以重复声明,后面会覆盖前者
3.没有块级作用域:
if(1==1){
var a=2;
}
console.log(a)
可以打印出2 ;因为在if这个大括号中只是语法,并没有形成作用域,作用域还是window;
作用域:1.全局作用域:整个页面,window对象;2.局部作用域:函数内部的范围,函数大括号包裹的范围;3.块级作用域:
函数以及只要有大括号包裹的都是块级作用域;
const:
声明常量 -- 一旦创建，就不能修改的 量就是常量
- 常量 必须 在 声明的同时 赋值
- 一旦赋值 不能修改
- 有块级作用域
- 变量名不能重复
- 没有变量提升
let考虑的逻辑更简单一点,用var 还要想这个变量在哪里声明过,为什么是undefined,什么时候是什么时候不是,用let声明不用想太多,使用变量必须在变量声明之后;es6语法在老浏览器使用会出问题,所以最好设置,如果对方是老浏览器,提示下载新浏览器
解构赋值
一种方便快速获取对象 和 数组中的值 方式
【对象解构】使用 对象解构 自动 将 同名属性 赋值 给同名变量
- 语法 ： let { 变量名1,变量名2,变量名n } = 对象;
- 解释 ： 相当于 创建 n 个变量，并且 从 对象中 取出 与变量同名的属性的 值 设置给变量
【数组解构】使用 数组解构 自动 将 数组中的元素 按顺序 设置给 变量
let cityList = ['P城', 'Y城', '军事基地', '学校'];
let [c01,c02,c03,c04] = cityList;
console.log(c01,c02,c03,c04); // P城 Y城 军事基地 学校
对象解构案例
const obj = {
name: '皮卡丘',
skill: '十万伏特',
age: '未知'
}
function say({name,skill,age}) {
console.log(name)
console.log(skill)
console.log(age)
}
say(obj); // 将 obj 传给 形参时，就自动进行了 对象解构
3.5 箭头函数
箭头函数this指向,和普通函数有什么区别,普通函数的this指向,开发项目中哪些场景用到箭头函数
箭头函数可以是构造函数吗?箭头函数的this可以改变吗
箭头函数的this指向父级没有使用箭头函数的的作用域
不可以,箭头函数不绑定this的指向
mounted() {
let Pserons = function() {
console.log(e, "-----e");
this.name = "jack";
this.age = "25";
return this;
};
console.log( new Pserons()) 普通函数打印的对象
let Pserons = (e)=> {
console.log(e, "-----e");
this.name = "jack";
this.age = "25";
return this;
};
console.log( new Pserons()) 箭头函数打印的vue
}
se6有哪些新的数组api,哪些新的对象api
新的对象api
let obj = {a:1,b:2,c:3}
undefined
Object.values(obj)
(3) [1, 2, 3]
Object.keys(obj)
(3) ["a", "b", "c"]
Object.entries(obj)
(3) [Array(2), Array(2), Array(2)]
es6用到的有哪些,promise解构赋值,class类,
promise的api,如同一个数组,并列发请求 有用到过吗
eg: let p1 = this.http('www')
let p2 = this.http('www')
Promise.all([请求数组p1,p2 ]).then()
promise是什么,状态可以改变吗,假如多个promise成功状态返回,怎么做
处理异步操作 3个状态(成功,失败,等待,状态一旦改变,不可更改)
数组api,foreach和map的区别
promise.then和axios.then有什么区别?
js基础
冒泡在哪些场景有用到,用捕获阻止冒泡
事件代理
构造函数与普通函数的区别
深拷贝浅拷贝概念,具体怎么实现
js改原数组的方法,不改变原数组的方法
事件委托什么时候用到
触发一个事件,先冒泡还是先捕获
面对对象,原型链,继承,闭包的概念,作用,缺点,哪些地方用到闭包
原型object.propoty是谁
base-line和buttom的区别
js是单线程还是多线程
因为js是单线程,所以碰到耗时的异步操作,会把他移到异步任务队列里,继续执行同步任务,同步执行后再执行异步队列里面的
事件循环:异步队列分为宏任务队列和微任务队列,script标签可以看作是一个宏任务.js代码在执行的过程中,会把宏任务推到执行栈,执行一个宏任务的过程中会产生微任务,将微任务放到队列,执行完当前宏任务后再去执行微任务队列,执行完成后,继续执行下一个宏任务,依次循环
从页面开始到渲染完毕,经历了什么
输入一个url dns回去解析域名 找到对应的ip 通过ip去找服务器 去请求资源返回给客户端 ,客户端拿到资源后会把html解析成dom树,css解析成cssom树,合并为render树,渲染到页面
面向对象
面向对象本质：是对面向过程的封装，将功能代码封装到对象中，只暴露特定的接口。外部只管怎么调用，无需关心内部实现
css
scss和less的特性
css预处理器 可以储存变量,嵌套
css选择器
- 标签选择器
- 类选择器
- id选择器
- 属性选择器
- 子选择器
- 包含选择器
- 兄弟选择器
- 群选择器
- 全局先择期
- 伪类选择器 未完待续
清除浮动的几种方法
怎么让字体小于12px;
css缩小功能
css3新特性,html5新特性
flex
左边固定100px;右边自适应,有哪些方法
上面固定,下面自适应有哪些方法
botostrop的原理,有没有看源码,怎么做一个自适应
盒模型
垂直居中的方法
1.行内元素
.father{
text-align: center;
line-height: 500px;
}
-
text-align 属性规定元素中的文本水平对齐方式.
值 描述
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
bfc块级格式化上下文
动画失帧怎么办
有哪些布局,流式布局是怎样排列的
怎么实现响应式布局
其他
get和post的区别
webserket做聊天的那个有用过吗
封装原生ajax
哪些性能优化
git指令
什么造成跨域,怎么解决跨域,除了后端的cors解决,自己用jsonp解决过吗
小程序优化的思路
小程序的概念,页面跳转,组件传值,自己有没有单独封装过组件,
4.2 HTTP协议
- 作用：浏览器和服务器 传输数据的 数据格式
- 两个：请求报文 和 响应报文
4.3 Get 和 Post
- Get 请求：数据 在 URL？后面跟着
- Post请求：数据 在 请求报文体 中
- form-data：用在上传文件时使用，用的分隔符 来 划分 多个 post 数据
- form-urlencoder：用在表单数据时使用，直接使用 键值对 方式 划分 多个 post 数据
