一起了解Vue3的不同

Template

在template中,Vue3支持了多个跟标签而Vue2只支持一个根标签

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

用Vite构建 在Vue3中引入TypeScript

 JavaScript
//src/shim-vue.d.ts
declare module "*.vue" {
    import { ComponentOptions } from "vue";
    const ComponentOptions: ComponentOptions;
    export default ComponentOptions;
}

vue-router

使用vue-router4.0来和Vue3 Vue-Router

$ npm install vue-router@next

 JavaScript
//main.ts
import { createWebHistory, createRouter } from "vue-router"

const history = createWebHistory();
const routes = [
    { path: "/", component: Home },
    { path: "/hello", component: Hello }
]
const router = createRouter({
    history,
    routes
})
const app = createApp(App)
app.use(router);
app.mount("#app");

Vue实例

 JavaScript
//vue2
import vue from "vue",
import App from "./App.vue",
new Vue({
    render(h){
        return h(App);
     }
}).mount('#app')
//vue3
import {createApp} from 'vue';
import App from './App.vue'
createApp(App).mounte('#app');

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

全局

//vue2
import Vue from "vue";
Vue.Component('Hello',{
    template:`
        <div>{{value}}</div>
    `
    props:['value'];
});
//vue3
const app=createApp(App);
app.component('Hello',{
    template:`
        <div>{{name}}</div>
    `
    data(){
        return {
            name:'chen',
        }
    }
})
app.mount('#app');
//防止全局组件过多而导致整个库变得庞大。
//vue3把全局组件放在实例当中。

取消了Filters

v-model不同

//vue2
v-model = :value + @input

//vue3
v-model = :value + @input

//自定义组件
v-model = :modelValue + @update:modelValue

函数组件的写法

//Vue2
app.component('loading',{
    render(h){
      return h('div',{title:'hello'},['hello']);
    }
});
//Vue3
app.component('loading',{
    render(){
      return h('div',{title:'hello'},['hello']);
    }
});
//此时的h需要从库中引入
//render当中的参数可以是props和context

data统一了

data(){
    return{};
}

异步组件(分包加载)

// vue2
const component=()=>import('./component');
// vue3
import {defineAsyncComponent} from "vue"
const component=defineAsyncComponent(()=>import('./component'))

事件简化

//vue2
this.$emit('name',...);
this.$on();
this.$off();
this.$once();
//vue3
this.$emit('name',...); //剩下$emit
//Js中文网 - 前端进阶资源教程 https://www.javascriptc.com/

Directive

和生命周期做统一了

composition API

将数据、方法、computed、生命周期函数,集中写在一个地方。

setup()

执行时机是在beforeCreate和created之间。无法使用组件之内其他的东西。

注意:setup不能是异步的

setup()两个参数

如果使用到setup()可能会使用这两个参数props和context

props

 JavaScript
//props
<script lang="ts">
export default {
    name: "Home",
    props:{
      title: String,
    },
    setup(props: any){
      console.log(props.title);
  }
}
</script>

在这里要注意,如果我们要解构title是不允许的。 可以使用toRefs()来解构。

 JavaScript
<script lang="ts">
import {toRefs} from 'vue'
export default {
    name: "Home",
    props:{
      title: String,
    },
    setup(props: any){
      const {title}=toRefs(props);
      console.log(title.value);
  }
}
</script>

context

 JavaScript
//暴露三个组合属性
<script lang="js">
export default {
    setup(props,context){
      console.log(context.attrs);
      console.log(context.slots);
      console.log(context.emit);
    }

}
</script>
//只能获取这三个属性
//data,methods,computed是无法获取的。

可响应数据

在setup当中。普通的变量是无法响应到页面。 如果要让数据响应到页面。需要用到reactive

reactive

使用reactive要注意几个点

1.括号内的元素只能是对象和数组(简单数据类型使用ref - number,string,boolean);
2.如果要修改复杂类型的话需要通过创建新的值再通过修改新的值才会使页面响应。

ref

用于封装普通类型。

 JavaScript
<script>
import {ref} from "vue";
export default {
  setup(){
    const a=ref(10);
    return {a};
  }
}
</script>

ref可以通过ref属性获取DOM元素

 JavaScript
<template>
  <div id="nav" ref="a">
    {{a}}
  </div>
</template>

<script>
import {ref,onMounted} from "vue";
export default {
  setup(){
    const a=ref(null);
    onMounted(()=>{
      console.log(a);
    })
    return {a};
  }
}
</script>
//这里一定要使用onMounted钩子,在onMounted中操作元素

readonly

 JavaScript
//readonly保护所有操作:递归保护
//const只保护赋值
import {readonly} from "vue";
export default {
  setup(){
    const a=readonly(0);
    return a;
  }
}
//readonly保护只读保护度比较高,和const是不同的

shallowRef,shallowReactive,shallowReadonly

和ref,reactive,readonly的作用一样,主要的区别是深层监听和表层监听。

1. 使用shallowRef的时候数据无法响应。
2. 需要使用triggerRef

Raw

toRaw

将reactive、ref、readonly的原始数据提取出来操作。

如果对原始数据进行操作,不会被监听。

markRaw

将原始对象永远不能转换为reactive、ref、readonly,永远保持原始数据。

isRef,isReactive,isReadonly

判断类型

作者：gggccc
链接：https://juejin.im/post/6875573837250068493