vue2.0与3.0使用对比

过渡3.0比2.0开始进入和开始离开多加一个from

 

 

自定义指令

3.0钩子函数inserted，bind，updataed

2.0钩子函数beforemount，mounted，craeted，

 // 自定义指令
    directives: {
        focus: {
            mounted(el) {
                el.focus()
            }
        }
    },

Vue.directive('focus', {
  inserted(el) {
    el.focus()
  }
})

生命周期和diff

3.0diff对比修改的那一部分dom，2.0对比全部dom

3.0可以使用setup替代data存放数据，计算属性methdos

3.0setup里没有this，因为setup在beforecreat组件创建之前前调用

3.0新加指令和修饰符

v-memo有缓存，值相等就跳过更新，不更新时跳过渲染，相当于usememo，

v-per无需编译，写啥显示啥

3.0修饰符取消了.number

传值

3.0新加provide依赖，使用inject注入，取消了$children

// 将provide绑定在vue实例上
app.provide('username','入口文件传值')

 // 接收入口文件中的provide
    inject: ['username'],

3.0filester过滤器没有了

3.0slot用v-slot绑定name值

动态组件和异步组件

3.0动态组件采用KeepAlive，里嵌套components，

 <button @click="onebtn('tow1')">one组件</button>
        <button @click="onebtn('tow')">tow组件</button>
        <KeepAlive>
            <component :is="dtzj" />
        </KeepAlive>

2.0使用keep-alive

   <button @click="bt('Nav')">选项二</button>
      <button @click="bt('Banner')">选项三</button>
      <!-- 动态组件利用is属性实现切换 -->
      <keep-alive :is="which_show"></keep-alive>

3.0新增异步组件defineasynccomponents

  // 引入异步组件
import { defineAsyncComponent } from 'vue'
  // 使用异步组件，把组件返回给AdminPage
    AdminPage: defineAsyncComponent(() => 
            import('./one.vue')
        )

双向绑定

3.0采用数据劫持object.defineproperty，2.0采用代理proxy

3.0采用函数式，使用creatapp创建组件实例，使用的是方法函数，2.0采用面向对象

let app=createApp(App)