vue的那些事...
vue
这是一篇包含vue2以及vue3的一些知识点，浏览一下吧...
computed
computed中的属性是存在缓存中的，只有所依赖的参数改了，才会重新计算一遍，不然不会计算。如果属性不在computed里修改，也不会做相应的更新
data() {
return {
originText: 1
}
},
computed: {
text() {
return this.originText * 4
}
},
created() {
this.text = 777
}
//最终的text是4，而不是777
watch 监听
watch的两种写法：
- 直接写函数
- 一个对象，里面包含handler函数
watch:{
a(newValue,oldValue){//方法一
},
b:{
handler(newValue,oldValue){
},
deep:true,//深度监听
immediate:true//立即监听
}
}
mixins
mixins包含的是一个对象数组。mixins里也可以使用周期函数，当混入的组件也包含相同的生命周期函数时，mixins的周期函数先执行。
mixins.js
export const mixin={
created(){
console.log('mixins created')
},
mounted() {
console.log('mixins mounted')
},
}
组件：
import {
mixin
} from '../mixins/mixins'
export default {
mixins: [mixin],
created() {
console.log('正常的created')
},
mounted() {
console.log('正常的mounted')
}
}
结果为:mixins created->正常的created->mixins mounted->正常的mounted
provide/inject
这一组是同时出现，provide是定义在父组件上，inject定义在自组件上去获取父组件传递的值。
可以是对象也可以是函数，return的值是对象
//父组件
provide: {
text: "vue2222"
},
//子组件
inject: ['text'],
component
component是内置的组件，可以通过is去指定渲染的是哪个组件
slot插槽
<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。
props
父组件传参数给自组件时，子组件接收的参数
类型：Array/Object
Array:直接将父组件传的参数写入即可
object:参数如下
1.1 type：Number/Object/Boolean/Array/Date/Function/Symbol
表示传入的参数类型
1.2 default 默认值 any
1.3 required 是否必须 Boolean
1.4 validator 检查 Function
组件传值，子组件传值给父组件有2种方式
- 子组件做了操作，触发父组件的操作，但是并不需要自组件传值给父组件
父组件：
<EmitEventChild @large='text=1' />
emits: ['large'],
子组件：此时的$emit不需要再传第二个值了，只需传一个参数，即事件名称即可。
<template>
<button @click="$emit('large')">放大</button>
</template>
- 子组件确实需要传值给父组件
子组件：此时的$emit传两个参数，第一个是事件名称，第二个是value。
setup
setup是新的组合api。
在beforeCreated之前就会被调用
setup有2个参数，props和context
props
setup中的props是响应式的，传入的值变化了，也会随之改变，也可以通过watch或者watchEffect去监听。
Note:在setup时，不要解构props，会失去响应式
props是不可更改的。
context
context里面包含了很多this的东西，但不包含props中定义的属性
包含context.attrs/context.slots/context.emit(传值可用，类似vue2中的this.$emit())。
reactive
reactive接收参数为对象
const object =reactive({foo:'bar'})
ref
ref接收参数可以是值/对象
const count=ref(0)
console.log(count.value);//0
count.value++;
console.log(count.value);//1
在setup中使用ref的值时，需要用’.value’的方式去获取相应的值
在template中，会自动解藕，所以不用’.value’的方式
computed默认返回一个不能修改的ref对象
const countPlus=computed(()=>count.value+1)
console.log(countPlus.value)
countPlus.value—;//报错
watchEffect
传入函数，会立即执行/响应，类似于vue的生命周期，类似react的useEffect
在setup中被调用时，会在组件卸载的时候，被自动清除。
router
vue3的路由需使用vue-router 4.x以上
package.json
"dependencies": {
"vue": "^3.0.0-rc.1",
"vue-router": "4.0.0-beta.3"
},
使用方法如下
route.js
import {createWebHashHistory,createRouter} from 'vue-router'
const history=createWebHashHistory()
export const routes=createRouter({})
teleport
teleport可以手动将代码块插到某个标签上
<teleport to="body">
<child-component name="John" />
</teleport>
getCurrentInstance
获取当前组件的实例，类似vue2.x中的this
import {getCurrentInstance} from 'vue'
setup(){
const {ctx}=getCurrentInstance();
ctx.$router//获取路由
}
全局变量
globalProperties（全局变量）
main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
let app=createApp(App)
app.config.globalProperties.boo='21'
app.mount('#app')
v-for
v-for
支持object遍历
<template>
<div v-for='(item,index) in object' :key="index">{{item}}</div>
</template>
<script>
export default {
data() {
return {
object: {
title: "123",
content: "content",
footer: "footer"
}
}
}
}
</script>
Suspense新语法
用于向后台获取数据时，异步获取过程中的页面展示的情况，vue2.x是用v-if去判断。
vue3.x可以使用suspense和default/fallback去处理，fallback为获取数据过程中展示的代码，default为有了数据做展示的代码,代码如下：
<template>
<Suspense>
<template #default>
<div v-for="item in articleList" :key="item.id">
<article>
<h2>{{ item.title }}</h2>
<p>{{ item.body }}</p>
</article>
</div>
</template>
<template #fallback>
Articles loading...
</template>
</Suspense>
</template>
<script>
import axios from 'axios'
export default {
async setup() {
let articleList = await axios
.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response)
return response.data
})
return {
articleList
}
}
}
</script>
可以使用多个v-models
vue2.x一个组件只能使用一个v-model，vue3.x可以使用多个v-model
<Switch v-model:value="y" v-model:checked="x"/>
//template
props:{
value:Boolean,
checked:Number
},
setup(props,context){
const toggle=()=>{
context.emit('update:value',!props.value)
context.emit('update:checked',2)
}
return {toggle}
}
