10分钟体验Vue3全家桶(Vue3 + VueRouter4 + Vuex4)

2022-06-21 516

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 10分钟体验Vue3全家桶(Vue3 + VueRouter4 + Vuex4)

关于发布时间

具体时间可以看大家可以看看官方时间表。官方时间表

目前在Vue3处于Beta版本,后面主要是处理稳定性问题。也就是说主要Api不会有很多改进。尤大神从直播中说虽然很多想法,但是大的变化最快也会出现在3.1上面了。所以目前的版本应该应该和正式版差异很小了。看来Q2能发布的可能性极大。

脑图

>>>>>>>️脑图链接<<<<<<<

升级@vue/cli

为了让cli支持vue3需要将vue-cli升级到4.3.1以上

npm update -g @vue/cli
vue -V
➜  frontend-basic git:(master) ✗ vue -V
@vue/cli 4.3.1

创建项目

vue create vue3demo
vue add vue-next // 添加vue3插件升级为vue3

创建Vue实例

Vue3使用API一律是函数式风格所以和new告别了。

// Vue3.0
createApp(App).use(router).use(store).mount('#app')
// Vue2.0
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

响应式数据

模板定制

没有变化

<template>
  <div class="hello" style="border:1px solid">
    <h1 ref="root">{{ msg }}</h1>
    {{state.count}} double is {{double}}
    <button @click="add">+</button>
  </div>
</template>

声明响应式数据

// Vue2
export default {
  // ....
  data() {
    return {
      state: {
        count: 0
      }
    };
  },
}
// Vue3
export default {
  // ....
  setup(){
    const state = reactive({
      count:0
    })
    return {state}
  }
}

自定义事件

// Vue2
export default {
  // ....
  methods: {
    add() {
      this.state.count++;
    }
  },
}
// Vue3
export default {
  // ....
  setup(){
    const add = () => {
      state.count++
    }
    return {add}
  }
}

计算属性

// Vue2
export default {
  // ...
  computed: {
    double() {
      return this.state.count * 2;
    }
  },
}
// Vue3
export default {
  // ...
  setup(){
    const double = computed (() => state.count * 2 )
    return {double}
  }
}

监听器

// Vue2
export default {
  // ...
  watch: {
    count: value => {
      console.log("count is changed:", value);
    }
  }
}
// Vue3
export default {
  // ...
  setup(){
    watch(
      () => state.count,
      value => {
        console.log('state change :',value)
      }
    )
  }
}

生命周期函数及获取Dom元素

// Vue2
export default {
  // ...
  mounted() {
    this.$refs.dom.style.color = "red";
  }
}
// Vue3
export default {
  // ...
  setup(){
    // ref 创建一个响应式的数据对象
    const root = ref(null)
    onMounted(() => {
      // 关联节点
      console.log('dom',root)
      const dom = root.value
      dom.style.color = 'red'
    })
  }
}

Vue2	Vue3
beforeCreate	setup(替代)
created	setup(替代)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

路由Vue-router

创建路由

// Vue2
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:  [
    // 路由配置不变
  ]
})
// Vue3
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes:  [
    // 路由配置不变
  ]
})

使用路由

// Vue2
export default {
  name: "Home",
  methods: {
    goHome() {
      this.$router.push('Home')
    }
  }
};
// Vue3
export default {
  setup() {
    const router = useRouter()
    const goHome = () => router.push('Home')
    return { goHome};
  }
};

统一状态管理Vuex

创建Vuex

// Vue2
export default new Vuex.Store({
  state: {
    count:1
  },
  mutations: {
    inc(state){
      state.count ++ 
    }
  },
  actions: {
  },
  modules: {
  }
})
// Vue3
export default Vuex.createStore({
  state: {
    count:1
  },
  mutations: {
    add(state){
      state.count ++ 
    }
  },
  actions: {
  },
  modules: {
  }
});

使用Vuex

// Vue2
export default {
  name: "Home",
  data() {
    return {
        state: this.$store.state
    };
  },
  computed: {
    double() {
      return this.$store.state.count * 2;
    },
  },
  methods: {
    add() {
      this.$store.commit("add");
    }
  }
};
// Vue3
import { computed,  reactive } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore()
    const state = store.state
    const double = computed(() => store.state.count * 2)
    const add = () => {
      store.commit("add");
    };
    return { state, add ,double};
  }
};