2022年面试部分总结

118 阅读2分钟
>1.vue实现双向绑定的原理

当在创建vue实例的时候,vue会遍历data属性,用Object.defineProperty将它们转化为getter/setter并且在内部追踪相关的依赖,在属性被访问和修改的时候通知变化,每个组件实例都有相应的watcher程序实例,他会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而使关联的组件更新

var book={
}
var name ="";
Object.defineProerty(book,name,{
    set:function(value) {
      name =value
      console.log("你取了一个书名叫做"+name)
    },
    get:function() {
    return "《"+name+"》"
    },
})
book.name = "data" //赋值,调用set----你取了一个书名叫做data
console.log(book.name)//取值。调用get----《data》

网站:
1.关于双向绑定原理解释:www.cnblogs.com/canfoo/p/68…
2.关于object.definepropety中configurable参数问题blog.csdn.net/getTheChees…

>2.vuex数据存储在哪,刷新页面会消失吗,还有localstorage,sessionstorage之间的区别

1.区别:
vuex数据存储在内存中
localstorage(本地存储)数据存储在本地,一般不主动删除,会一直存在
sessionstorage(会话存储)临时保存, localstorage和sessionstorage只能保存字符串,对于复杂的对象可以采用json字符串的方式存储---JOSN.stringify和JOSN.parse的方式存储
2.应用场景:
vuex是用于组件之间的传值,localstorage和sessionStorage是用于页面之间传值
3.永久性:
vuex刷新页面,数据会被清除(这里值F5刷新-清除内存)--会重新加载vuex中的数据 sessionstorage关闭页面会消失
localstorage不会消失
网站:juejin.cn/post/689449…

>>3.css3的新特性

1.属性选择器
eg:a标签中有title属性

a[title] { font-size:16px }
2.border-radius
border-radius : 50%;能画圆。
3.颜色
在css2.1 颜色的值可以是 英文单词,rgb(),16进制
但是在css3中有---rgba(),hsl(),hsla(),opacity();
hsl----色调,饱和度,亮度
4.新增伪类,伪元素 ----p:nth-child(2) 伪元素::brfore ::after
5.css3过渡--transition
6.box-sizing---通过box-sizing来修改盒模型-- 标准盒模型还有ie盒模型 标准盒模型和ie盒模型都是-----content+padding+border+margin 标准盒模型-----content ie盒模型是content+padding+border
7.动画-----animation
8.2D和3D转化----transform

>>3.vue3新增加的特性