vue3对比vue2使用,代码解释最直观

更新日期: 2020-05-06阅读: 3.2k标签: vue3

废话不多说,现在就来对比我们常用的使用对比

创建模板

对于大多数组件,vue2和Vue3中的代码即使不完全相同,也是非常相似的。但是,Vue3支持片段,这意味着组件可以有多个根节点。

这在呈现列表中组件以删除不必要的包装器div元素时特别有用。但是,在本例中,表单组件的两个版本都将只保留一个根节点

VUE2的使用
<template>
    <div>
        <h2> {{ title }} </h2>
        <input type='text'v-model='username' placeholder='Username' />
        <input type='password'v-model='password' placeholder='Password' />
        <button @click='login'>
            Submit
        </button>
        <p>
            Values: {{ username + ' ' +password }}
        </p>
    </div>
</template>
VUE3的使用

唯一真正的区别是如何访问数据。在Vue3中,响应式数据都封装在一个响应状态变量中,所以需要访问这个状态变量(state)来获得值

<template>
    <div>
        <h2> {{ state.title }}</h2>
        <input type='text'v-model='state.username' placeholder='Username' />
        <input type='password'v-model='state.password' placeholder='Password' />
        <button @click='login'>
            Submit
        </button>
        <p>
            Values: {{ state.username + ' ' +state.password }}
        </p>
    </div>
</template>~~~~

设置数据

这就是主要的区别——Vue2选项api对战Vue3组合API。
选项 API将代码分成不同的属性:数据、计算属性、方法等等。同时,组合API允许根据函数而不是属性类型对代码进行分组。
对于表单组件,只有两个数据属性:一个username和一个password。
Vue2代码看起来是这样的——只需在数据属性中放入两个值

VUE2
export default {
    props: {
        title: String
    },
    data () {
        return {
            username: '',
            password: ''
        }
    }
}
VUE3

在Vue3.0中,必须投入更多精力来使用一个新的setup()方法,所有的组件初始化都应该在这个方法中进行。
另外,为了让开发人员更好地控制响应,可以直接访问Vue的响应API。

创建响应式数据需要三个步骤:

1. 从vue中导入reactive

2. 使用响应式方法声明数据

3. 使用setup方法返回响应式数据以便模板可以访问

代码看起来有点像这样,接着在模板中,使用如state.username和state.password来访问

import { reactive } from 'vue'
export default {
    props: {
        title: String
    },
    setup () {
        const state = reactive({
            username: '',
            password: ''
        })
        return { state }
    }
}

创建方法

VUE2

Vue2选项API有一个单独的方法部分。这部分可以定义所有的方法,并以任何想要的方式进行组织

exportdefault {
    props: {
        title: String
    },
    data () {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        login () {
            // login method
        }
    }
}
VUE3

Vue3组合API中的setup方法也可以处理。它的工作原理与声明数据有些类似——必须先声明方法,然后返回,以便组件的其他部分可以访问它

exportdefault {
    props: {
        title: String
    },
    setup () {
        const state = reactive({
            username: '',
            password: ''
        })
        const login = () => {
            // login method
        }
        return {
            login,
            state
        }
    }
}

生命周期使用

VUE2

Vue2直接从组件选项中访问生命周期挂钩。以下示例代码将等待挂载的事件

exportdefault {
    props: {
        title: String
    },
    data () {
        return {
            username: '',
            password: ''
        }
    },
    mounted () {
        console.log('component mounted')
    },
    methods: {
        login () {
            // login method
        }
    }
}
VUE3

现在有了Vue3 组合API,几乎所有东西都在setup()方法中,包括挂载的生命周期挂钩。
然而,生命周期挂钩在默认情况下并不包括在内,因此必须导入在Vue3中被称为onmount的方法。这看起来与前面导入reactive是一样的。
然后,在setup方法中,通过传递函数来使用onmount方法

import { reactive, onMounted } from 'vue'
export default {
    props: {
        title: String
    },
    setup () {
        // ..
        onMounted(() => {
            console.log('component mounted')
        })
        // ...
    }
}

computed属性

VUE2

添加一个computed属性,将用户名转换为小写字母。
为了在Vue2中实现这一点,向选项对象添加一个computed字段。从这里,可以像这样定义属性

exportdefault {
    // ..
    computed: {
        lowerCaseUsername () {
            return this.username.toLowerCase()
        }
    }
}
VUE3

Vue3的设计允许开发人员导入他们使用的东西,并且项目中没有不必要的包。本质上,他们不希望开发人员包含从未使用过的东西,这而这在Vue2中已经成为一个日益严重的问题。
因此,要在Vue3中使用computed属性,首先必须将computed导入到组件中。
然后,与之前创建响应式数据的方式类似,将一段响应式数据变成一个计算值

import { reactive, onMounted, computed } from 'vue'
export default {
    props: {
        title: String
    },
    setup () {
        const state = reactive({
            username: '',
            password: '',
            lowerCaseUsername: computed(()=> state.username.toLowerCase())
        })
    // ...
    }
}

访问Props

VUE2

访问道具带来了Vue2和Vue3之间的一个重要区别——this意味着完全不同的东西。
在Vue2中,this几乎总是指向组件,而不是特定的属性。虽然这使事情表面上很容易,但它使类型支持成为一种痛苦。
然而,可以很容易地访问props——只需添加一个小例子,比如在挂载挂钩期间打印出title prop:

mounted() {
    console.log('title: ' + this.title)
}
VUE3

但是在Vue3中不再使用它来访问props、触发事件和获取属性。相反,setup()方法有两个参数:

1. props - 对组件props的不可变访问
2. context - Vue3公开的上下文选择属性(emit、slot、attrs)
setup(props) {
    // ...
    onMounted(() => {
        console.log('title: ' +props.title)
    })
    // ...
}

触发事件

VUE2

在Vue2中触发事件非常简单,但是Vue3对如何访问属性/方法提供了更多控制。
本例希望在按下“Submit”按钮时触发父组件的一个登录事件。
Vue2代码只需要调用this.$emit并传入有效负载对象

login (){
    this.$emit('login', {
        username: this.username,
        password: this.password
    })
}
VUE3

然而在Vue3中,this现在含义不同了,得做出一点改变。
幸运的是,文本对象公开了emit,提供了与this.$emit相同的东西
所要做的就是添加context作为setup方法的第二个参数。将对c文本对象进行析构,使代码更简洁。
然后,只需调用emit来触发事件。与前面一样,emit方法有两个参数:

1. 事件名称
2. 与事件一起传递的有效负载对象
setup(props, { emit }) {
    // ...
    const login = () => {
        emit('login', {
            username: state.username,
            password: state.password
        })
    }
    // ...
}

访问属性

VUE2
<template>
    <div>
        <h2> {{ title }} </h2>
        <input type='text'v-model='username' placeholder='Username' />
        <input type='password'v-model='password' placeholder='Password' />
        <button @click='login'>
            Submit
        </button>
        <p>
            Values: {{ username + ' ' +password }}
        </p>
    </div>
</template>
<script>
    export default {
        props: {
            title: String
        },
        data () {
            return {
                username: '',
                password: ''
            }
        },
        mounted () {
            console.log('title: ' + this.title)
        },
        computed: {
            lowerCaseUsername () {
                return this.username.toLowerCase()
            }
        },
        methods: {
            login () {
                this.$emit('login', {
                    username: this.username,
                    password: this.password
                })
            }
        }
    }
    </script>
VUE3
<template>
    <div>
        <h2> {{ state.title }}</h2>
        <input type='text'v-model='state.username' placeholder='Username' />
        <input type='password'v-model='state.password' placeholder='Password' />
        <button @click='login'>
            Submit
        </button>
        <p>
            Values: {{ state.username + ' ' +state.password }}
        </p>
    </div>
</template>
<script>
    import { reactive, onMounted, computed } from 'vue'
    export default {
        props: {
        title: String
        },
        setup (props, { emit }) {
            const state = reactive({
                username: '',
                password: '',
                lowerCaseUsername: computed(()=> state.username.toLowerCase())
            })
            onMounted(() => {
                console.log('title: ' +props.title)
            })
            const login = () => {
                emit('login', {
                    username: state.username,
                    password: state.password
                
                })
            }
            return {
                login,
                state
            }
        }
        
    }
</script>

感兴趣的拿去玩玩,还挺有意思的,VUE2在中小型项目的优势还是比较明显,VUE3的木便是大型和超大型项目使用,越来越高级的赶脚,反正阿里全程支持,可以说是国产化的,用得也放心。

原文:https://segmentfault.com/a/1190000022620385

链接: https://fly63.com/article/detial/8960

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!