基础面试题
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括:HTML,CSS,JavaScript,浏览器,性能优化等等
+ [四、拓展阅读](#_65)
一、背景
Vue
规定不允许直接修改props
或者data
属性,必须使用Vue.set
方法。
Vue.set
方法用来修改对象属性。如果要增加属性所属对象是响应式的,该方法可以确保属性被创建后也是响应式的,同时触发视图更新。
二、基础知识
注:修改的对象必须为响应式对象,且操作响应式对象的属性也必须是响应式的,能够触发视图更新。否则浏览器JS
将无法解析,从而报错。
三、示例代码
目的:定义一个列表数据,通过2个不同的按钮来控制列表数据。
// 1. 首先在页面导入Vuejs文件库
import Vue from 'vue'
<div id="app2">
<p v-for="item in items" :key="item.id">
{{item.message}}
</p>
<button class="btn" @click="btn2Click()">动态赋值</button><br/>
<button class="btn" @click="btn3Click()">为data新增属性</button>
</div>
<script>
export default {
data () {
items:[
{message:"Test one",id:"1"},
{message:"Test two",id:"2"},
{message:"Test three",id:"3"}
]
},
methods:{
btn2Click:function(){
Vue.set(this.items,0,{message:"Change Test",id:'10'})
},
btn3Click:function(){
var itemLen=this.items.length;
Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
}
}
});
</script>
点击第一个按钮后,运行methods
中的btn2Clcick方法,将Test one更改为Change Test。
总结
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】