vue2和vue3的区别

211 阅读1分钟

vue2和vue3的区别

一、# 模板指令

1、v-if、v-for的区别

3.0不建议写在一个元素上,但是依然可以同时绑定

vue2:当在同一个元素上使用v-if时,将优先v-for

2、v-model对的组件使用进行了返工,替换v-bind.sync

4、v3提供2中定义组件的方式

defineComponent

defineAsyncComponent 异步组件 用法就是在2.0的基础上 用这个函数处理之后的返回值

5、生命周期函数 :

生命destroyed周期选项已重命名为unmounted

生命beforeDestroy周期选项已重命名为beforeUnmount

Vue2.0的beforeCreate、created在Vue3.0中被setup()代替 :

开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method

二、api

vue2


  props: {
  
    title: String
  },
  
  data () {
  
    return {
    
      username: '',
      password: ''
      
    } 
  },
  methods: {
  
    login () {
      // 登陆方法
    }
  },
  components:{
  
            "buttonComponent":btnComponent
            
        },
        
  computed:{
  
	  fullName(){
          
	    return this.firstName+" "+this.lastName;  
            
         }
    }
}

vue3


  props: {
  
    title: String
    
  },
  
  setup () {
  
    const state = reactive({ //数据
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
    })
     //方法
    const login = () => {
      // 登陆方法
    }
    return { 
      login,
      state
    }
  }
}

6、不能在事件修饰符中绑定键码值keycode了,这个API已经被移除, 现在使用标准的key

7、onon、off 和 $once 实例方法用不了,意味着中央事件总线bus被弃用

8、Vue2过滤器也被弃用

9、app.componet注册全局组件

10、全局配置不再绑定到原型 globalPrexxxx