Vue 3.0使用

Vue 3.0 beta发布了。。

环境准备

可以使用beta的测试页面

测试页面

vue-next-webpack-preview

Minimal webpack setup for Vue 3 (beta)

This is for preview purposes only. There might be bugs and undocumented behavior differences from v2, which are expected.

Also note that if you are using VSCode, Vetur isn’t updated to take advantage of Vue 3’s typing yet so intellisense in Vue files may not be fully functional (especially in templates).

意思就是这个页面是用于Vue 3.0 beta测试用的。

Vue Cli

也可以使用Vue Cli工具配合vue-cli-plugin-vue-next使用:

npm install -g @vue/cli
// OR
yarn global add @vue/cli

vue-cli-plugin-vue-next

然后添加vue-cli-plugin-vue-next插件：

vue add vue-next

这个插件安装了Vue 3.0 beta相关依赖。

基本使用

API、属性计算、属性监听、Router和状态管理都参考composition-api，使用和React Hooks有点像：

//DOM....
// <div>{{isIosDevice}}</div>
// <div v-for="(item, index) in list" :key="index">{{item}}</div>

//script
export default {
  name: "Test",
  props: {},
  setup() {
    import { ref, getCurrentInstance } from "vue";

    //...

    let isIosDevice = ref(false);
    let data = ref({});
    let list = ref([]);
    let state = ref({isIosDevice: false, data: {}, list: []});

    const { ctx } = getCurrentInstance();
    // console.log(ctx.$router);

    const handlerTouch = (e) => {
        //do something...
    }

    const getServerData = (data) => {
        //get server data...
        data.value = data;
        state.value.data = data;
    }

    return {
        isIosDevice,
        data,
        list,
        state,
        handlerTouch,
        getServerData
    }
  }
}

//style scoped & global...

问题

Object属性编译失败

表现为：多层级DOM，添加任何属性编译失败：

<div class="container">
    <div class="level1">
        <div class="level11">
            <div class="level111">
                <div class="level111"></div>
            </div>
        </div>
    </div>
    <div class="level2">
        <div class="level22">
            <div class="level222">
                <div class="level2222"></div>
            </div>
        </div>
    </div>
</div>

暂时使用v-html解决。

渲染闪烁

表现为：当变量较多时，当页面较长或较大时，页面渲染会有较长时间属性依次更改，导致页面闪烁多次，应该是性能有问题。

内存泄露

这个很难碰到，但经过测试，表现为：

与其他插件集成后，存在内存泄露的情况。

这个就由Vue开发者慢慢填坑吧，估计2021年前不可能把所有问题都修复，这之前最好不要在项目中使用，对于React开发者，组内其他人实在跟不上才在中大型项目中使用Vue。

code enjoy!🤩🤩🤩

作者：indeex

链接：https://indeex.cc

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。