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的两种写法：

1. 直接写函数
2. 一个对象，里面包含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种方式

1. 子组件做了操作，触发父组件的操作，但是并不需要自组件传值给父组件

父组件：
<EmitEventChild @large='text=1' />
emits: ['large'],

子组件：此时的$emit不需要再传第二个值了，只需传一个参数，即事件名称即可。

<template>
    <button @click="$emit('large')">放大</button>
</template>

2. 子组件确实需要传值给父组件
   子组件：此时的$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}
}