Vue2部分知识点和注意项

1、Vue管理的函数为普通函数

需要this指向Vue实例

data写为函数式，考虑到 避免多个组件实例共享同一个数据对象，造成数据污染和引用关系问题，函数式每次都会返回一个新的对象

data() 函数中尽量避免依赖 this 上的值，容易引发顺序依赖或错误

2、Vue中的事件修饰符

• prevent：阻止默认事件(常用)
• stop：阻止事件冒泡(常用)
• once：事件只触发一次(常用)
• capture：使用事件的捕获模式
• self：只有event.target是当前操作的元素时才触发事件
• passive：事件的默认行为立即执行，无需等待事件回调执行完毕

3、监视属性写法

watch: {// 简单监听name(newVal, oldVal) {...},// 深度监听对象obj: {handler(newVal, oldVal) {...},deep: true,      // 深度监听immediate: true  // 立即执行},// 监听嵌套属性'obj.name'(newVal, oldVal) {...},// 监听数组项'list[1]'(newVal, oldVal) {...}
}

4、绑定样式

• class样式

  • 字符串：class="active"（动态获取类名）

  • 对象：:class="{active: isActive, 'text-danger': hasError}"

  • 数组：:class="[activeClass, errorClass]"

• style样式

  • 对象语法：:style="{fontSize: fontSize + 'px'}"
  • 数组语法：:style="[baseStyles, overridingStyles]"

5、v-if和v-show

指令	实现机制	适用场景	生命周期影响
v-if	移除/添加 DOM	低频切换	触发完整生命周期
v-show	display:none	高频切换	仅触发 mounted

v-if：注意获取元素时机

6、react、vue中的key的作用

1、虚拟DOM中key的作用

key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较

2、对比规则

• 旧虚拟DOM中找到了与新虚拟DOM相同的key

  • 若虚拟DOM中内容没变，直接使用之前的真实DOM！

  • 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

• 旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到到页面。

3、用index作为key可能会引发的问题

• 若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
• 如果结构中还包含输入类的DOM：会产生错误DOM更新==>界面有问题。

4、开发中如何选择key

• 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
• 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

7、修改响应式对象限制

1、数组的响应式注意事项

• Vue 对以下数组方法进行了重写，使其具有响应性：

方法名	功能描述
push()	在数组末尾添加元素
pop()	删除数组最后一个元素
shift()	删除数组第一个元素
unshift()	在数组开头添加一个或多个元素
splice()	删除或替换数组中的元素
sort()	对数组排序
reverse()	反转数组顺序

• Vue.set() 或 vm.$set()

this.list[1] = 'grape'  			// ❌ 不会触发视图更新
this.$set(this.list, 1, 'grape')  	// ✅ 触发响应式更新

2、对象的响应式注意事项

data() {return {user: {name: 'Alice'}}
}
this.user.age = 20  					// ❌ Vue 无法检测这个新增的属性
this.$set(this.user, 'age', 20)  		// ✅ 响应式添加新属性
this.user = { ...this.user, age: 20 }  	// ✅ 替换整个对象也有效

✅ Vue 3 使用 Proxy，自动响应新增属性和索引赋值，无需 $set。

8、input v-model的修饰符

修饰符	说明
.lazy	输入时不更新，失去焦点再同步数据
.number	自动将输入转换为数字
.trim	自动去除首尾空格

<input v-model.lazy.trim.number="inpVal">

9、v-html安全问题

v-html 是 Vue.js 指令，用于直接插入 HTML 内容，使用简便，但存在 XSS 攻击风险。如果插入的内容来自用户输入或其他不可信来源，有必要做处理。

1、XSS 攻击简介

跨站脚本攻击是一种安全漏洞，攻击者通过在网页中注入恶意的客户端脚本（通常是 JavaScript），当其他用户浏览该网页时，这些脚本会在用户的浏览器中执行。这可能导致用户的敏感信息泄露、会话劫持等问题。

2、 使用 v-html 的潜在风险

当你使用 v-html 绑定动态内容时，如果这些内容未经充分验证或转义，就可能存在 XSS 风险。例如：

<div v-html="userInput"></div>

如果 userInput 包含恶意脚本，如 <script>alert('XSS')</script>，这段代码将会被当作 HTML 解析并执行，从而引发安全问题。

3、如何安全地使用 v-html

1. 不要信任任何来自外部或用户输入的内容：确保你完全控制了要插入的内容，并且知道其来源是安全的。

2. 对不可信数据进行清理和转义：如果你必须展示用户输入的内容，应该先对其进行清理，移除可能存在的恶意代码。可以使用专门的安全库来帮助完成这项工作，比如 DOMPurify。

   import DOMPurify from 'dompurify';new Vue({el: '#app',data() {return {userInput: '<img src=x onerror=alert("XSS")>'};},computed: {safeHtml() {return DOMPurify.sanitize(this.userInput);}}
   });
   

   <div v-html="safeHtml"></div>
   

10、v-cloak 使用

防止页面在 Vue 初始化完成之前（网速慢等原因）显示未编译的 Mustache 标签（如 {{message}}），俗称{{ }} 闪屏问题

<template><div id="app" v-cloak>{{ message }}</div>
</template><style>[v-cloak] {display: none;}
</style>

11、自定义组件命名推荐

1、简写方便（ES6 对象简写语法）

<MyComponent /> // 不用使用脚手架时，自闭合会导致后续组件不能染。
<my-component />import MyComponent from './MyComponent.vue'export default {components: {MyComponent  // ✅ 简洁清晰，自动映射为 <MyComponent />}
}

2、脚手架推荐 & Vue 官方风格指南建议

3、区分原生元素

12、配置项props

// 1. 简单声明
props: ['name'],// 2. 类型限制
props: {age: Number
},// 3. 完整配置
props: {title: {type: String,required: true,default: '默认标题',validator: (value) => value.length > 3}
}

注意：props 是只读的，修改需转存到 data 中

13、全局方法与属性扩展

// 添加全局方法
Vue.prototype.$formatDate = function(date) {// 格式化逻辑
}// 添加全局属性
Vue.prototype.$apiBase = 'https://api.example.com'// 组件内使用
this.$formatDate(new Date())
this.$apiBaseVue.prototype.$myMethod = function() { ... }