Vue2.0与Vue3.0区别总结

Vue2.0与Vue3.0区别总结

结构部分:
1.程序主入口文件 main.js
**vue2.0

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

**vue3.0-暴露出 createApp方法

    import {
    createApp } from 'vue';
    import App from './App.vue'

    createApp(App).mount('#app')

组件语法部分(vue3.0主要针对api的优化,vue3.0兼容vue2.0写法)
vue3.0 使用组合式api,使用的地方在setup回调函数中,这个回调函数是创建组件之前执行,由于在执行 setup 时尚未创建组件实例,因此在 setup 选项中没有 this。这意味着,除了 props 之外,你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。
1.数据响应式
ref:ref 对我们的值创建了一个响应式引用。使用引用的概念将在整个组合式 API 中经常使用。
在模板中解析会自动解开,直接使用。(

{ {msg}}

);但是在js中必须(msg.value)
reactive: 响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中,返回的代理是不等于原始对象。建议只使用响应式代理,避免依赖原始对象
对对象进行结构赋值会让对对象每一个属性失去响应式,所有在es6解构赋值前,可以通过toRefs方法包装
toRefs: 将对象每个属性有具有响应式属性,并且带有ref特性;访问方式不同。可以解构赋值不影响数据的响应式

readonly: 有时我们想跟踪响应式对象 (ref 或 reactive) 的变化,但我们也希望防止在应用程序的某个位置更改它。例如,当我们有一个被 provide 的响应式对象时,我们不想让它在注入的时候被改变。为此,我们可以基于原始对象创建一个只读的 Proxy 对象
ref/reactive/toRefs 数据区别:
Vue2.0与Vue3.0区别总结_第1张图片

    import {
    reactive, readonly } from 'vue'

    const original = reactive({
    count: 0 })

    const copy = readonly(original)

    // 在copy上转换original 会触发侦听器依赖

    original.count++

    // 转换copy 将导失败并导致警告
    copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly.

**vue2.0 选项式api

      data

你可能感兴趣的:(javascript,vue.js,前端)