vue2.0和vue3.0中的区别

Posted 2021-08-15 奥特曼　

目录

一、mian.js中vue的实例化​​​​​​​

二、app.vue

三、选项式(option API)和组合式(Composition API)

四、钩子函数

五、路由

vue2

vue3

 六、vuex

vue2

七、响应式数据

ref

reactive

八、v-model

 vue2中的v-model 

 vue3中的v-model

---

一、mian.js中vue的实例化

main.js入口文件 ：初始化实例使用的插件（css、router、store），将内容渲染到页面上，项目文件的入口，执行js的时机是从main.js从上到下的执行的

vue2

import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

vue3

ximport { createApp } from 'vue'
import App from './App.vue' // 根组件
import router from './router'
createApp(App).use(router).mount('#app')

main.js

区别	vue2	vue3
创建vue实例	直接引入vue创建vue实例	引入vue中的createApp的方法调用，通过createApp作为vue的启动函数，返回一个应用实例
挂载实例	通过el挂载	mount挂载
使用router之类的插件	放在创建vue实例参数中	通过链式调用createAPP方法 直接在后面以.use的方式引入

二、app.vue

app.vue：通常我们通过vue-cli生成脚手架的时候默认显示页面的初始位置

vue2

<template>
  <div id="app">
    <router-view />
  </div>
</template>

vue3

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

app.vue

区别	vue2	vue3
根标签	只能有一个根元素	可以有多个根元素

三、选项式(option API)和组合式(Composition API)

区别	vue2选项式(option API)	vue3组合式(Composition API)	描述
定义数据	data() {     return {       list: []     }   },	setup () {     const list = ref([])     findNew().then(res => { list.value = res.result })     return { list }   }	vue2 data里就是响应式数据 vue3 需要调用ref或、reactive函数调用
定义方法	methods: {     getList() {       console.log(1)     }   }	setup () {       const getList = () => { console.log(1) }     return { list,getList }   }	模板需要引入的所有外部变量都要return 出去
计算属性	computed: {     num() {       return this.number * 2     }   }	setup () {      const number = ref(1)     const num = computed(() => {       return number.value * 2     })     return { list, num }   }	通过ref调用的参数  使用值需要属性.value去使用(template模板不需要)
监听	watch: {     number(newValue, oldValue) {       console.log(newValue)     }   }	setup () {       watch(list, (newValue, oldValue) => {          console.log(newValue)      })   }	基本监听 vue2  watch 里是一个函数 函数名代表要监听的值 vue3 watch(数据|数组|get函数，(新值，旧值)=>{回调处理逻辑})
深度监听	watch: {     number: {       immediate: true,       deep: true,       handler(newValue, oldValue) {         console.log(newValue)       }     }   },	setup () {      watch(list, (newValue, oldValue) =>          { console.log(newValue) },         { immediate: true, deep: true })   }	immediate代表首次是否监听 deep 代表是否深度监听 vue3具体watcher写法 链接
总结	选项式api分的比较细致，但是数据多找起来麻烦	组合式api 都写在setup函数中，找起来简单写，但是想要响应式效果需要引入ref和reactive，计算属性和 监听都要引入 ，注意setup中没用this

四、钩子函数

说明	选项式API（Vue2）	组合式API(Vue3)
实例初始化前，定义的变量获取不到	beforeCreate	不需要（直接写到setup函数中）vue3钩子函数都写setup中
可以获取变量，发送ajax请求	created
vue虚拟dom，挂载到真实dom之前，拿不到dom	beforeMount	onBeforeMount
可以进行dom操作 类似于window.onload（）	mounted	onMounted
修改了变量==触发 数据更新了，但是页面未更新	beforeUpdate	onBeforeUpdate
可以获取最新的dom数据和值 数据更新，页面更新完成	updated	onUpdated
销毁前，清楚定时器，解绑js定义的事件(还没被销毁)	beforeDestroyed	onBeforeUnmount
销毁后，消除定时器，解绑js定义的事件	destroyed	onUnmounted
总结：vue2和vue3钩子函数不建议一起使用	vue2中 8个自执行钩子函数	vue3中 7个自执行钩子函数，都是以回调形式调用， setup在beforeCreate先执行，没有this

vue2使用钩子函数

  mounted() {
    console.log(1)
  }

vue3使用钩子函数

  setup() {
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }

五、路由

vue2

import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入页面
// 目录下的 .vue文件 如果叫index.vue 导入的时候路径只用写到当前组件的目录
import home from '../views/home'

Vue.use(VueRouter)
// 配置路由

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: home,
    // meta路由元数据=》传参（携带一些数据）=》访问当前页面的
    meta: {
      title: '首页'
    }
  }
]

const router = new VueRouter({
  routes
})

export default router

路由跳转

this.$router.push('/')

vue3

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'Layout',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Layout'),
    children: [
      {
        path: '',
        component: () => import(/* webpackChunkName: "Home" */ '../views/home')
      },
    ]
  },
]

// 创建路由实例
const router = createRouter({
  // 使用hash方式实现路由
  history: createWebHashHistory(),
  // 配置路由规则，写法和之前一样
  routes
})

export default router

vue3.0中createRouter来创建路由实例，createWebHashHistory代表使用hash模式的路由。

跳转路由

import { useRouter, useRoute } from 'vue-router'
export default {
  setup () {
    const route = useRoute()
    const router = useRouter()

    const toLink = () => {
      router.push('/')
    }
    const look = () => {
      console.log(route, router)
    }
    return { toLink, look }
  }
}

跳转路由需要引入useRouter 在setup函数中调用再去使用

vue2和vue3 路由的区别

区别	vue2	vue3
引入路由	通过vue-router直接引入vueRouter	通过vue-router引入createRouter、createwebHashHistory
创建实例	直接new VueRouter实例	调用createRouter方法
代码	const router = new VueRouter({   routes    })	// 创建路由实例 const router = createRouter({   // 使用hash方式实现路由   history: createWebHashHistory(),   // 配置路由规则，写法和之前一样   routes })
路由跳转	直接this.$router.push('/')	import { useRouter } from 'vue-router'   setup(){         const router = useRouter()          router.push('/')   }

 六、vuex

vue2和vue3 定义的方式大致一样，只是使用起来有些区别

vue2

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  getters: {
 
  },
  actions: {
   
  },
  modules: {
  }
})

调用方式

this.$store.state....

 vue3

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  getters: {
 
  },
  actions: {
   
  },
  modules: {
  }
})

调用方式

import { useStore } from 'vuex'
setup(){
 const store = useStore()
 store.state...
}

vue2和vue3 vuex的区别

区别	vue2	vue3
引入方式	import Vuex from 'vuex'  创建 调用vuex的store方法	引入vuex中的createStore方法  直接调用导出
调用方式	this.$store.state...	import { useStore } from 'vuex' //引入  const store = useStore()  //调用  store.state...

七、响应式数据

在vue2中我们在data中定义的数据是响应式的，但在vue3中 不能实现响应式，需要格外导入ref函数和reactive函数

ref

通过ref可以定义简单数据类型、复杂数据类型的数据，但是定义的数据如果要修改或者访问需要在变量名后面加.value属性

import { ref } from 'vue'
setup(){
 const num = ref(null)
 const obj = ref({})
 console.log(num.value++)
}

reactive

reactive只能定义复杂数据类型  用reactive定义的数据 修改时不用使用.value属性

import { reactive} from 'vue'
setup(){
 const list = reactive([])
 console.log(list)
}

ref和reactive

	ref	reactive
定义	简单、复杂数据类型	复杂数据类型
使用	引入 定义
使用哪个	1.首先使用ref 2.当确定表单中有哪些数据的时候用reactive

八、v-model

 vue2中的v-model 

vue2中的v-model
组件传递	语法糖	等价于
父组件	<son v-model="message"></son>	<son :value="message" @input="(val)=>this.message=val"></son>
子组件	<input type="text" :value="value" @input="$emit('input',$event.target.value)"> props: ['value']
总结	一个组件或元素 v-model只能使用一次

 vue3中的v-model

vue3中的v-model
组件传递	语法糖	等价于
父组件	<son v-model="msg"></son>	<son :modelValue="msg"  @updata:modelValue="val=>msg=val">></son>
子组件	<input type="text" :value="modelValue" @input="number" />  props: {     modelValue: {       default: "",       type: String,     },   },   setup(props,context) {     const number = (e)=>{ context.emit('update:modelValue',e.target.value)   };     return { number };   },
父组件多个v-model	<son v-model="msg" v-model:age="age"></son>	<son :modelValue="msg" @update:modelValue="val=>msg=val" :age="age" @update:age="val=>age=val"></son>
子组件	<input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" /> <input type="text" :value="age" @input="$emit('update:age',$event.target.value)"  />  props:['modelValue','age']
总结	v-model使用多次，但是vue3中没有sync修饰符

                           

vue2虽然v-model只能使用一次 但是可以通过.sync修饰符 可以传多次值

vue2.0中的 sync

单个.sync	<son :abc.sync="message"></son> 等价于 <son message=val" @update:abc=>val=>message=val"></son>
多个.sync	<son :abc.sync="message" :bcd.sync="age">son</son> 等价于 <son :modelValue="msg" @update:modelValue="val=>msg=val" :age="age" @update:age="val=>age=val"></son>