Vue 全局API 详细介绍(nextTick、set,超全前端中高级面试复习大纲

现在,我们执行一个setTimeout方法,为list添加一个新的元素:

mounted(){

setTimeout(()=>{

this.list.push(‘lion’)

})

console.log(this.list,‘添加元素后 list’)

}

页面效果及打印信息如下:

list(数组)中使用push(在vue中被重写)添加的元素是具有响应性的,我们试着换另外一种方式(list[index] = “xxx”):

mounted(){

setTimeout(()=>{

this.list[2] = ‘lion’

})

console.log(this.list,‘添加元素后—list’)

}

页面效果及打印信息如下:

这时候虽然打印中数组发生变化,但是页面的显示却没变化,并没有多出“lion”,因为通过list[index]的方式添加的元素并不会劫持到其set与get方法,即未存在双向数据绑定,新元素不具有响应性。

往数组添加元素,且元素也具有响应性,除了使用push,还可以使用Vue.set():

mounted(){

setTimeout(()=>{

this.$set(this.list,2,‘lion’)

})

console.log(this.list,‘Vue.set()添加元素后—list’)

}

此时页面效果为:

当然,除了数组之外,当某个对象需要添加属性的时候,如直接使用obj.propertyName = “xxx”,则新加的属性也不具有响应性,需要使用this.$set(obj,propertyName,“xxx”)的方式新增属性。

data() {

return {

obj: {

name:‘leo’,

age:18

}

}

}

{{obj.name}} {{obj.age}} {{obj.like}}

在mounted阶段添加一个新属性“like” :

mounted(){

setTimeout(()=>{

this.obj.like = ‘read’

})

console.log(this.obj,‘添加属性后—obj’)

}

页面效果及打印信息如下:

验证使用obj.propertyName = "xxx"的方式添加的属性不具有响应性,同样的,可以使用this.$set(obj,propertyName,“xxx”)的方式使其具有响应性:

setTimeout(()=>{

this.$set(this.obj,‘like’,‘read’)

})

页面效果及打印信息如下:

注意观察,页面正常显示,对象新增了“like”属性跟相应的get、set方法,使其具有响应性。

注意:对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

Vue.delete(target,propertyName/index)

删除对象的 property。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制,但是你应该很少会使用它。有点像是Vue.set()的逆向操作。

如上例,我们想要删除obj对象的“like”属性:

data() {

return {

obj: {

name:‘leo’,

age:18,

like:‘read’

}

}

}

删除某个对象的属性我们使用delete obj.propertyName:

mounted(){

setTimeout(()=>{

delete this.obj.like

})

console.log(this.obj,‘删除属性后—obj’)

}

页面效果及打印信息如下:

我们会看到,虽然属性已经不存在了,但是却没有触发视图更新,因为Vue 不能检测到 property 被删除,这时候就可以使用Vue.delete(obj,propertyName)来实现:

mounted(){

setTimeout(()=>{

this.$delete(this.obj,“like”)

})

console.log(this.obj,‘Vue.delete()删除属性后—obj’)

}

页面效果及打印信息如下:

小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

img
img
img
img

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
img

学习笔记

主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分

**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式

HTML5 /CSS3

**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性

**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型

JavaScript

**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串

的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性

**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型

[外链图片转存中…(img-aIJzGPAu-1710842084698)]

JavaScript

**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值