vue使用和React
vue3 Option API 对应React class Component vue3 Composition API 对应React class Hooks
vue常见使用
- 插值、表达式
{msg} {3>2?2:1}
- 指令、动态属性
v-model :visible
-
v-html：会有xss风险，会覆盖子组件
-
computed和watch
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
watch:{
name(oldVal,newVal){
//引用类型拿不到，需要深度监听
console.log("watch name",oldVal,newVal);
}
info:handel(oldVal,newVal){
//引用类型拿不到，需要深度监听
console.log("watch info",oldVal,newVal);
},
//深度监听
deep:true
}
- class和style
使用动态属性，使用驼峰命名法
:class="{black:isBlack,yellow:isYellow}"
:style={styleData}
data(){
return {
isBlack:true,
isYellow:true,
styleData:{
fontSize:'40px' //转换为驼峰式
}
}
}
- v-show和v-if
- v-show是css样式显示和隐藏的切换
- v-if是对条件的判断，对dom结构的渲染判断
- 循环（列表）渲染
- v-for，key不能乱写
- v-for和v-if不能一起使用！
- 事件
- event参数，自定义参数 eg: ($event,val)
- 事件修饰符，按键修饰符 eg: @click.stop @click.ctrl
@click=incre($event,val)
incre(event,val){
console.log('event',event,event.__proto__.constructor)
console.log('event',event.target)
console.log('event',event.currentTarget)
}
结论：1.event是原生的
2.事件被挂载在当前元素
- 表单 v-model 常见的表单项 textarea checkbox radio select 修饰符 lazy number trim
vue常见使用
- prop和$emit
- 父向子传参使用prop
props: {
father_string:
{ type: String,
default: 'father'
}
}
- 子向父传参使用this.$emit()
//调用父组件的事件
this.$emit('add',this.title)
- 组件间通讯-自定义事件
//调用自定义事件
event.$emit('onAddTitle',this.title)
- 组件生命周期
挂载阶段
-
beforeCreate（初始化界面前）
-
created（初始化界面后）
-
beforeMount（渲染dom前）
-
mounted（渲染dom后）
更新阶段
-
beforeUpdate（更新数据前）
-
updated（更新数据后）
销毁阶段
-
beforeDestroy（卸载组件前） 解除绑定，销毁子组件以及事件监听器
-
destroyed（卸载组件后）
父子组件的生命周期
-
加载渲染过程 父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted
-
更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated
-
销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
-
常用钩子简易版 父create->子created->子mounted->父mounted
vue高级特性
- 自定义v-model 颜色选择器
// 父组件
<p>{name}</p>
<Son v-model="name"></Son>
data(){
return {
name:"zhangsan"
}
}
// 子组件 颜色选择器
<input type="text"
:value="text1"
@input="$emit('change',$event.target.value)"
>
export default {
model:{
props: 'text1'//对应props的text
event:'change'
}
props: {
text1:String,
default(){
return ''
}
}
}
//1.上面的input使用了:value，而不是v-model
//2.上面的change和model.event要对应起来
//3.text1属性对应起来
-
ref
拿到当前的DOM节点方式
<p ref="url1">{name}</p>
- nextTick会在DOM渲染之后被触发，以获取最新的DOM节点
//1.异步渲染，通过$nextTick待DOM渲染完后再回调
//2.页面渲染完成后会将data的修改做整合，多次data修改只会渲染一次
this.$nextTick(()=>{
//获取DOM元素
const urlElement =this.$ref.url1
console.log(urlElement.childNodes.length)
})
- slot 插槽，父组件向子组件插入值
- 基本使用
//父组件
<SlotDemo :url="website.url">
{{website.title}}
</SlotDemo>
data() {
return {
website: {
url: 'http://imooc.com/',
title: 'imooc',
}
}
//子组件
<template>
<a :href="url">
<slot>
//默认内容，即父组件没设置内容时，这里显示
//接收的就是父组件的website.title
</slot>
</a>
</template>
<script>
export default {
props: ['url'],
data() {
return {}
}
}
</script>
- 作用域插槽
//父组件
<ScopedSlotDemo :url="website.url">
<template v-slot="slotProps">
{{slotProps.slotData.title}}
</template>
</ScopedSlotDemo>
//子组件
<template>
<a :href="url">
<slot :slotData="website">
//默认值显示 subTitle ，即父组件不传内容时
{{website.subTitle}}
</slot>
</a>
</template>
- 具名插槽
//定义具名插槽
<slot name="heard"> </slot>
//使用具名插槽
<NamedSlot>
<template v-slot="heard">
<h1>将插入 heard slot 中</h1>
</template>
</NamedSlot>
- 动态、异步组件
- 动态组件
用法:
:is="component-name"
应用:需要根据数据，动态渲染的场景。即组件类型不确定（课题详情页）
<component :is="NextTickName"/>
import NextTick from './NextTick'
components:{
NextTick
}
data() {
return {
NextTickName: "NextTick",
}
}
- 异步组件
使用:
import（）函数，按需加载，异步加载大组件
应用:客户内网，pc端后台管理，数据图表管理器组件，datav，echarts等
//父组件
<FormDemo v-if="showFormDemo"/>
<button @click="showFormDemo = true">show form demo</button>
showFormDemo: false
同步是:
import CustomVModel from './CustomVModel'
import NextTick from './NextTick'
import SlotDemo from './SlotDemo'
import ScopedSlotDemo from './ScopedSlotDemo'
异步是:
components:{
FormDemo: () => import('../BaseUse/FormDemo'),
//等于
FormDemo: () => {
return import('../BaseUse/FormDemo')
},
}
- keep-alive 缓存
使用:
<keep-alive></keep-alive>
应用:缓存组件,频繁切换，不需要重复渲染，vue常见性能优化
-
mixin
-
多个组件有相同逻辑，抽离出来，会有一些问题:变量不明确，可读性差;多个mixin 会造成命名冲突
-
vue3 提出的Composition API 解决了这个问题
import myMixin from './mixin'
export default {
mixins: [myMixin], // 可以添加多个，会自动合并起来
}
-------------------
//mixin.js
export default {
data() {
return {
city: '北京'
}
},
methods: {
showName() {
console.log(this.name)
}
},
mounted() {
console.log('mixin mounted', this.name)
}
}
vuex使用
-
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
-
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
-
Mutation：是
唯一更改 store 中状态的方法，且必须是同步函数。 -
Action：用于提交 mutation，而
不能直接变更状态，可以异步，但不能直接操作State。 -
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
- dispatch
- commit
- mapState
- mapGeeters
- mapActions
- mapMutations
vue-router使用
路由模式；hash，h5 history
- hash模式（默认）:juejin.cn/#/user/10
- history:juejin.cn/user/10
- 后者需要server支持
路由配置:动态路由，懒加载
动态路由以冒号开头:id
const user ={
template:'<div>{{$route.params.id}}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: SlotDemo }
]
})
懒加载
component:() => import('../BaseUse/FormDemo')
