Vue2基础，字节前端高级岗，看这一篇就够了

}

简写成函数、默认只有getter🧡：

computed:{

fullName() {//不用写在data里了，插值语法直接使用

return this.firstName + ’ ’ + this.lastName

}

}

侦听器watch

---

相比computed可以执行异步操作、完整写法：

watch: {

isHot: {

deep:true,//监测多层值的改变

immediate:true,//一开始执行一次

handler(newValue,oldValue){

…

}

}

},

简写成函数🧡：

watch: {

isHot(){

…

},

deep: true//这样也可以

},

Vue监测对象、数组的改变

---

Vue监测对象是通过getter和setter

如果在对象里新增一个属性，则视图不会更新，此时需要使用Vue.set()

Vue监测数组必须使用这几个Vue维护的方法(因为没有getter和setter)、不能使用中括号操作、否则视图不会更新

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

Vue.set()、this.$set()

---

如果在对象里新增一个属性，则视图不会更新，此时需要使用Vue.set()

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。

Vue.set（target, propertyName/index, value）全局方法

this.$set(target, propertyName/index, value)局部方法🧡

过滤器filter

---

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

局部过滤器🧡

{{ message | capitalize }}

filters: {

capitalize: function (value) {

if (!value) return ‘’

value = value.toString()

return value.charAt(0).toUpperCase() + value.slice(1)

}

}

全局过滤器

Vue.filter(‘capitalize’, function (value) {})

组件的使用

---

步骤

1. 定义组件

2. 注册组件

3. 使用组件（写组件标签）

全局注册和局部注册

局部注册：靠new Vue的时候传入components选项🧡

全局注册：靠Vue.component(‘组件名’，组件)

Vue指令

---

常见指令：

• v-text替换文本不能解析标签

• v-html替换文本，可以解析标签，有安全问题，注意XSS跨站攻击、http-only字段的cookie除了在http中使用，不能在别的地方使用，所以是安全的

• v-once初次动态渲染后，就视为静态内容

• v-cloak解决网速慢出现{{xxx}}的问题

• v-pre跳过所在节点编译过程、利用它跳过没有使用指令语法、插值语法的节点来加快编译

自定义指令：自定义指令

有的情况下，仍然需要对普通 DOM 元素进行底层操作

// 全局在用的时候注册一个全局自定义指令 v-focus

Vue.directive(‘focus’, {//第二个参数可以简写成函数

// 当被绑定的元素插入到 DOM 中时……

inserted: function (el) {

// 聚焦元素

el.focus()

}

})

//自己用注册局部指令

directives: {

focus: {

// 指令的定义

inserted: function (el) {

el.focus()

}

}

}

Scoped

---

作用：局部样式，防止冲突

App.vue里一般不用scoped

在JS里可以使用require引入样式

深度选择器，可改UI组件库的样式（不一定生效）

/deep/ 类名{}

ref属性🧡

---

也可以子传父，在下面自定义事件举例

1. 可以获取元素的真实DOM、如果放在组件标签身上，则是组件实例对象（vc）

2. 使用方式

//打标识:

//获取:

this.$refs.xxx

props属性（父传子、也可以子传父）🧡

---

子传父 需要 父组件传一个函数到子组件 子组件调用这个函数并传参

传数据<Demo name="xxx">

接收数据：

1. 方式一（只接收）：props:['name']

2. 方式二（限制类型）：props:{name:Number}

3. 方式三（限制类型，限制必要性，指定默认值）：

props:{

name:{

type:String,//类型

required:true,//必要性

default:‘老王’//默认值

}

}

使用：this.name

备注：props在data前、props是只读的，如果要修改，就复制一份内容到data中，data中写name:this.name

mixin混入🧡

---

功能：可以把多个组件共用的配置提取成一个混入对象

第一步，定义混合，如：

export const xxx = {

data(){…},

methods:{…}

}

第二步使用混入，如：

import xxx from xxx

//1. 全局混入

Vue.mixin(xxx)

//局部混入

mixins:[‘xxx’]

插件💛

---

功能：增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

定义插件：

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

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

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

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

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

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

t.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi01NjcyZjU2ZTg1NTcwMDM3ZTg1ZmJlODI0MDA3MDJiYl9oZC5qcGc?x-oss-process=image/format,png)

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader