1. 使用antdv 想通过$message 全局进行引用，
// 之前 (Vue 2.x)Vue.prototype.$http=()=>{}
// 之后 (Vue 3.x)constapp=createApp({})app.config.globalProperties.$http=()=>{}
2. vue2和vue3使用vue-router的区别
vue3 在main.js里
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
const app = createApp(App)
app.use(router)
app.mount('#app')
3. vuex 在vue2和vue3中使用的区别
4. vue3 全局定义变量
main.js
import http from './api/request.js'
app.config.globalProperties.$http = http
.vue
import {getCurrentInstance } from 'vue' //在vue 组件中引入
const {proxy: {$http}} = getCurrentInstance() //先解构出来
$http.doLogin(params).then //全局使用
5. vue3 父组件引用子组件方法
在使用组合式 API 时，响应式引用和模板引用的概念是统一的。为了获得对模板内元素或组件实例的引用，我们可以像往常一样声明 ref 并从 setup() 返回,模板引用只会在初始渲染之后获得赋值,所以只能在mount生命周期开始可以获取并运行。
6. provide/inject
test.vue
<template> <div> <TestChild :name="sname" :age="18" ref="testcomponent"></TestChild> </div> <span style="color:red; height: 30px">我是父组件</span> <span>hello{{title}}</span> <a-button @click="changeValue">父组件改变</a-button></template><script>import { reactive, ref, toRefs, onMounted, provide} from 'vue'import TestChild from './TestChild.vue'export default { install(app) { const version = Number(app.version.split('.')[0]) if (version < 3) { console.warn('This plugin requires Vue 3') } // ... }, components: { TestChild }, setup() { const testcomponent = ref(null) //声明 const state = reactive({ sname: "sally" }) const testfu = () => { testcomponent.value.test() //获取子组件方法 testcomponent.value.say() //获取子组件方法 } onMounted(() => { testfu() }) let title = ref("要传递的标题") function changeValue() { title.value = "父组件改变过啦" } function sonChangeValue() { title.value = "子组件来改变啦" } provide("title", title) provide('sonChangeValue',sonChangeValue) return { ...toRefs(state), title, testcomponent, //并返回 changeValue } }}</script><style lang=""> </style>
testchild.vue
<template> <div> <h2 style="color: green"> 我是子组件</h2> <span>名称{{name}}</span><span>年龄{{age}}</span> <br/> <span>inject{{title}}</span> <a-button @click="sonChangeValue">子组件来改变</a-button> <TestGrandChildren></TestGrandChildren> </div></template><script>import {h, inject} from 'vue'import TestGrandChildren from './TestGrandChildren.vue'export default { components:{ TestGrandChildren }, props: { name: String, age: Number }, setup(props, {expose}) { function say() { console.log('say hi') } function test() { console.log("hello, sallys, i am testing" ) } let title = inject('title', "子组件初始值") let sonChangeValue = inject('sonChangeValue') return { say, test, title, sonChangeValue } // expose({ // test // }) // return () => h('h1', {}, props.name) }}</script><style lang="less"> </style>
testgrandchildren.vue
<template> <div> <h3 style="color: blue">我是孙组件</h3> <h1 style="color: purple">{{title}}</h1> </div></template><script>import {inject} from 'vue'export default { setup() { let title = inject('title', "孙组件初始值") return { title } }}</script><style lang=""> </style>purple
7. nextTICK
8. patch
9. getSequence
Vue3的getSequence最长上升子序列
数组[2, 11, 6, 8, 1]为例：最终输出的结果为[0, 2, 3]，表示最强增长序列的索引分别是0, 2 ,3;对应的值是2,6,8。换句话说，在这个数组中最长连续增长的值就是数组中的2,6,8三个元素。
