前端基础vue笔记

vue是一种渐进式框架（逐步增强）、有完整的生态。目前我接触的前端项目都是基于vue的。

vue的写法有两种：选项试api（vue2）和 组合式api(vue3)

循环有for in 和 for of

for in用于遍历键名，for of用于遍历键值。一般后台来的数据都是数组，所以用for in即可。

传参

 getNameHandler(item,$event) 在调用函数的参数最后一个写上$event或者干脆不传参数也可以接到e对象。

事件修饰符

@click.stop=‘func’ ; 阻止冒泡

数组变化的侦测：

push，pop，shift，unshift，splice，sort，reverse 都能侦测
fliter，concat，slice 不会侦听

计算属性

computed ，相同的引用只计算一次

class样式绑定

:class=‘{‘active’:isActive}’ 这种是带判断的
:class=‘[isActive?‘cur’:’‘]’ 这种可以用三元运算符
数组里面可以嵌套对象

style样式绑定

:style={‘color’:val,‘font-size’:‘12px’,fontSize:‘12px’} 驼峰法不用加引号
:style=[obj]

侦听器

watch ，可以监听data和props

表单输入绑定

v-model ;修饰符 .lazy失去焦点,.number,.trim

模板引用

ref=container this.$refs.container.innerHTML=xx 得到节点 innerHTML是原生js的属性
可以调用里面的js函数。也是一种传值的方式

组件

单文件组件必须有template，vue3可以有多个根节点。
等价于 两种写法是等价的
全局注册：main.js 里面 app.component(‘header’,header) 打包会打进去，建议局部注册

组件传值：props 父传子，$emit 子传父
props可以传function，然后实现子传父

插槽

slots，由子组件传值给父组件，然后再父组件的模板中使用

组件生命周期

创建，挂载，更新，消亡 x 之前 ；8个生命周期函数

依赖注入

Provide/Inject: 可以传多层
Vuex.Store 也可以传值

vue3和vue2的区别
1 组合式api
2 数据绑定用的Proxy
3 setup生命周期函数，加on开头，需要声明，可以写多个
4 多根节点

vue组件传值的方式：
‌Props：父组件通过props向子组件传递数据。这种方式易于理解，符合单向数据流的原则，有利于代码维护。但数据只能从父组件传递到子组件，不能反向传递，如果需要多个层级传递，则需要逐层向下传递props。过度依赖props可能导致组件间耦合度提高。‌12

自定义事件：子组件通过$emit向父组件传递数据。这种方式实现了数据从子组件向父组件的传递，遵循响应式设计原则。但只能实现相邻组件之间的通信，对于多层级嵌套组件间的通信较为复杂。

‌$refs和直接调用方法：通过$refs可以直接访问子组件的方法和数据。这种方式在需要对子组件进行操作或获取其内部状态时非常方便，但违背了组件的封装原则，使父组件对子组件内部实现细节有过多了解和依赖，不适用于跨层级、非父子关系的组件间通信。

‌Vuex：提供一个中心化的状态管理机制，便于多个组件共享和管理状态。适合大型项目，可以有效降低组件间的耦合度。但对小型项目来说，引入Vuex可能过于复杂，增加了项目的开发和学习成本。

‌Event Bus（全局事件总线）：简化任意组件间的通信，尤其适合不具有直接关联关系的组件之间进行消息传递。但全局事件容易造成命名冲突，需要谨慎管理事件名称，过度依赖Event Bus会导致整体架构混乱，不易于调试和维护。

provide/inject：可以在祖先组件中提供数据给任意后代组件，无需逐层传递props。但注入的数据不具备响应性，容易造成组件间隐式的强耦合，不利于组件独立性和可复用性。