Vue3.0版本快速入门并实现基础组件通信

今晚吃饼
2,148 阅读3分钟

相信关注我的小伙伴们已经彻底掌握了Vue3响应式原理的底层变化，今天我们来快速尝鲜Vue3.0的最新beta版本。

注意：由于Vue3.0还在beta阶段，本文只针对发文时最新版本v3.0.0-beta.14进行介绍，不敢保证后续版本是否会出现语法差异，请注意区分。

clone最新beta代码

我们可以访问github：https://github.com/vuejs/vue-next，查看最新的Vue3.0代码，截止今日（2020年6月6日）最新版本为：v3.0.0-beta.14，我们先将代码直接clone到本地。

git clone https://github.com/vuejs/vue-next.git

如果遇到网络不给力的情况，也可以使用国内同步库地址：

git clone https://gitee.com/332/vue-next

安装依赖

进入代码目录，安装依赖

cd vue-next
npm i 或者 cnpm i

打包Vue代码

使用命令构建Vue源码

npm run dev

打包后的源码将存放在 vue-next/packages/vue/dist/vue.global.js，一会我们需要在html中引用这个js文件。

启动服务，使用浏览器访问

我们clone的代码只是单独的Vue部分，并不是Vue Cli，其中不包含Webpack，我们需要创建html文件使用传统方式开发代码。 我们在vue-next根目录下创建index.html，引入上面打包好的vue文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">Hello Vue3.0</div>
</body>
<script src="./packages/vue/dist/vue.global.js"></script>
<script>
    console.log(Vue)
</script>
</html>

在命令行中启动文件服务，并在浏览器中进行访问：

npm run serve
// 成功后，访问http://localhost:5000，可以看到 `Hello Vue3.0`

F12打开控制台可以看到Console中已经输出了整个Vue对象

{
    BaseTransition: {name: "BaseTransition", inheritRef: true, props: {…}, setup: ƒ}
    Comment: Symbol(Comment)
    Fragment: Symbol(Fragment)
    KeepAlive: {name: "KeepAlive", __isKeepAlive: true, inheritRef: true, props: {…}, setup: ƒ}
    Static: Symbol(Static)
    Suspense: {__isSuspense: true, process: ƒ, hydrate: ƒ}
    Teleport: {__isTeleport: true, process: ƒ, remove: ƒ, move: ƒ, hydrate: ƒ}
    Text: Symbol(Text)
    Transition: (props, { slots }) => {…}
    TransitionGroup: {props: {…}, setup: ƒ}
    callWithAsyncErrorHandling: ƒ callWithAsyncErrorHandling(fn, instance, type, args)
    callWithErrorHandling: ƒ callWithErrorHandling(fn, instance, type, args)
    camelize: (str) => {…}
    cloneVNode: ƒ cloneVNode(vnode, extraProps)
    compile: ƒ compileToFunction(template, options)
    computed: ƒ computed$1(getterOrOptions)
    ...
    ...
}

创建Vue实例，并渲染到Dom中

下面我们需要创建一个Vue实例，并渲染到html中的#app元素上。

// script
const App = {
    template: `<div>创建Vue实例</div>`
}
Vue.createApp(App).mount('#app')

刷新浏览器，我们就会发现Vue已经将模板渲染到了Dom上，只显示出 创建Vue实例 的字样。

创建响应式对象

由于本文只是快速入门，并不会具体讲解Vue3.0的详细语法内容，后续文章会对Vue3.0的语法进行仔细拆解，欢迎关注，收藏！！！

Vue3.0中不再存在2中固定的data对象，而是使用 reactive 函数手动创建响应式对象。
reactive 函数会将传入的对象设置为响应式对象返回：

const { reactive } = Vue
const data = reactive({ point: 0 })
console.log(data) // Proxy {point: 0, __v_reactive: Proxy}

从打印出的结果我们可以看到对象已经被包装成了Proxy实例。

  • Vue响应式原理及变化可以参考之前的文章，请访问公众号： 前端拾遗

将响应式对象渲染到模板中

Vue3.0新增了全新的入口函数setup，可以认为是生命周期。 不同的是，setup函数拥有两个参数：props组件属性 和 context 上下文；而且组件中需要使用的数据和方法都需要在这个函数中集中到一个对象中返回(return)。

现在我们将响应式对象渲染到模板中:

const { reactive } = Vue
const App = {
    template: `
        <div>
            <div>{{data.point}}</div>
            <button @click="onClick">点击 ++</button>
        </div>
    `,
    setup(){
        const data = reactive({ point: 0 }) 
        return {
            data, 
            onClick() {
                data.point ++
            }
        }
    }
}
Vue.createApp(App).mount('#app')

刷新页面，点击页面中的按钮，可以看到，上方数值可以不断进行响应式变化了。

实现双向绑定

相信你看了上面的例子，可以清楚的知道双向绑定应该怎么编写了：

const App = {
    template: `
        <div>
            <div>{{data.point}}</div>
            <button @click="onClick">点击 ++</button>
            <input v-model="data.point" />
        </div>
    `,
    setup(){
        const data = reactive({ point: 0 }) 
        return {
            data, 
            onClick() {
                data.point ++
            }
        }
    }
}

计算属性

Vue3.0中的计算属性写法也大不相同了，改用了函数的方式自定义每个计算属性：

const { reactive, computed } = Vue
const App = {
    template: `
        <div>
            <div>{{pointCn}}</div>
            <button @click="onClick">点击 ++</button>
        </div>
    `,
    setup(){
        const data = reactive({ point: 0 })
    
        // 计算属性返回组合后的字符串
        let pointCn = computed(()=>{
          return `得分：${data.point} 分`
        })

        return {
            pointCn,
            onClick() {
                data.point ++
            }
        }
    }
}
Vue.createApp(App).mount('#app')

当我们点击按钮的时候，计算属性会响应式计算出拼装后的字符串。

创建子组件，并传值

props的定义没有变化，这次传递的属性可以在setup中获取，但是只会获取到已经在props中声明的字段内容。

const Child = {
    template: `
        <div>我是子组件，得分：{{point}}</div>
    `,
    props: {
        point: Number,
    },
    setup (props) {
        console.log(props) // 会得到props.point为666
    }
}

const App = {
    template: `
        <div>
            <Child :point="666"/>
        </div>
    `,
    components: { Child }
}
Vue.createApp(App).mount('#app')

组件通信

组件通信这块还是有一些变化的，我这里使用的是setup第二个上下文参数context，其中存在一个emit函数，用于传递事件，注意这里的函数名并不包含$符号

const Child = {
    template: `
        <div @click='onClick'>我是子组件，得分：{{point}}</div>
    `,
    props: {
        point: Number,
    },
    setup (props, context) {
        return {
            onClick() {
                // 传递事件
                context.emit("onChildEvent", "子组件传递事件")
            }
        }
    }
}

const App = {
    template: `
        <div>
            <Child @onChildEvent='onGetChildEvent' :point="666"/>
        </div>
    `,
    components: { Child },
    setup(){
        return {
            // 接收事件后触发该函数
            onGetChildEvent(v) {
                console.log(v) // 子组件传递事件
            }
        }
    }
}
Vue.createApp(App).mount('#app')

总结

Vue3.0的变化还是很大的，总体使用上，变得更加灵活，模块之间也做到了功能细分、按需引入，耦合也更低。使用一番感觉也没有太大难度，学习成本很低，希望尤大可以早点肝出正式版，很期待Vue后面的发展。

感谢，更多内容欢迎关注我的公众号：前端拾遗，一同记录进步。

avatar
文章
阅读
粉丝