阅读 1712

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

//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
复制代码
//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实例

//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');
复制代码

全局

//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
复制代码

Directive

和生命周期做统一了

composition API

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

setup()

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

注意:setup不能是异步的

setup()两个参数

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

props

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

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

<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

//暴露三个组合属性
<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

用于封装普通类型。

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

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

<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

//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

判断类型