import是引进外部函数吗_vue3已正式发布,你学了吗

慌慌张张,匆匆忙忙,vue2还没用好,vue3就来了？？？？真的学不动了....... 嘴上说着学不动,只见有的人在偷偷的在学习，我也利用假期看了看vue3...,倒吸一口气，还好差别并不是很大。 别问我什么原理，底层东西￥%￥%￥%#$#$%#$%,我不懂,直接干 vue3的安装

• 安装vue脚手架

需要node的版本8.9或者更高的版本

npm install -g @vue/cli

• 创建vue项目

(1)创建vue3-demo项目(第一种方式)

vue create vue3-demo

然后选择vue3的版本即可 (2)创建vue3-test项目(第二种方式) 先命名好vue项目的名称比如命名为vue3-test，然后cmd进入该文件夹,然后输入

vue create .

这样就可以创建一个名为vue3-test的vue项目了

vue2和vue3结构上的区别

• vue2.0 基本结构

export default {    data() {        return {}    },    // computed    computed: {},    //生命钩子    mounted() {},    // methods    methods: {},};script>

• vue3.0基本结构

<script>import { reactive, toRefs, computed, ref, onMounted } from 'vue';export default {      setup(){          const data = reactive({              list:[],              title:"hi~ vue3.0"          })        cosnt num = ref(0)        // 生命钩子        onMounted(()=>{})        //  computed        const Count = computed(()=>{}),        // methods        const method = ()=>{}        return {            ...toRefs(data),            Count,            // 方法视情况而定 组件中有使用才return            method         }      }};script>

有看什么之所以然来吗，首先我们可以看到了在vue2中data,computed,methods,mounted都是分割成了不同的属性,但在vue3中用方法(function)进行来分割,更加接近了JS的方法的调用,可以在另一个方法中直接调用,不用像vue2.0那样使用this去调用。

关于vue3的写法

• 按需引入

将需要的方法我们才会引进来,不需要则不引进

import { reactive, toRefs, computed, ref, onMounted } from 'vue';

• setup()方法

在vue3中我们全新的使用一个新的setup()方法,在组件初始化构造函数的时候触发,需要vue3中的reactive(),这个方法声明我们的数据为反应性数据,reactive()方法有点类似vue2中的data

使用setup()方法return我们的反应性数据，那为什么要用...toRefs(data)对它进行解构呢?只是为了能向vue2一样能更加简洁的方式渲染

放片段代码就知道了

//setup()return{data}//template

{{data.title}}

// 使用...toRefsreturn{...toRefs(data)}//template

{{title}}

• methods写法

在vue3中我们直接在setup()创建方法，然后return，在组件中就可以触发到该方法了

 // template "submit">提交  // script  export default {      setup(){        // methods        const submit = ()=>{            // 提交方法        }        return {            // 返回            submit        }      }};

• 计算属性computed写法

我们需要在vue中引入computed方法，然后也是在setup()方法中声明变量，然后返回,举个例子返回数组的length

 // template 

{{listLength}}</div>  //  script import { computed} from 'vue'; export default { setup() { const data = reactive({ list: [{ id: 1, title: "hi~,vue1.0" }, { id: 2, title: "hi~,vue2.0" }, { id: 3, title: "hi~,vue2.0" } ] })        //  methods const submit = () => {            //  提交方法 }        //  computed const listLength = computed(() => { return data.list.length            }), return { listLength, submit } }}; 生命周期钩子

生命周期函数写法也是写在setup方法里面

  // script  import { onMounted} from 'vue';  export default {      setup(){      // 页面加载完成执行      onMounted(()=>{        // 执行submit方法        submit()      })        // methods        const submit = ()=>{            // 提交方法        }        return {            // 返回            submit        }      }};

接收props和自定义事件emit

在vue3中没有了this,那怎么在script接收怎么获取props的值呢？？哈哈不着急,原来在我们一直提到的setup()方法中，我们可以接收两个参数setup(props,context)

props-不可变的组件参数

context-vue3暴露出来的属性(emit,slots,attrs)

直接上码

 @click=import { ref } from 'vue';export default {  props: {    item: {      type: Object    }  },  setup(props,context) {    //  获取props值    const getPropItem = ref(props.item);    const resource = ""       const submitFrom = ()=>{        //   自定义事件        context.emit("onSubmitFrom",getPropItem)       }    return {         submitFrom    };  }};script>

在vue3使用vue-router

在vue3中使用vue-router，值得注意一点就是 我们使用npm下载下来的默认是vue-router@3+的版本，但是在vue3中我们使用的vue-router版本是4+，所以需要这么下载

npm install vue-router@next --save

这样我们下载下来的vue-router就是版本4以上了

(1) vue2中使用路由

在vue2中我们在router.js,将路由通过vue.use()全局注入vue中

// router.jsimport Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const routes = [    { path: "/", name: 'base', component: ResourceHome },]// 创建路由实例let router = new Router({    routes,    mode: 'history', //去掉url#});// 导出export default router;

在mian.js中，在vue实例化中放入router.js,在vue项目中我们就可以使用this.$router去进行路由的操作

import router from './router.js';new Vue({    router, //实例化，表示会使用    render: (h) => h(App)}).$mount('#app');

(2)在vue2中router和route

使用this.$router完成路由的跳转   

this.$router.push('/index')

使用this.$route获取路由的信息

获取当前路由id：this.$route.params.id

获取当前路由地址：this.$route.path

获取当前hash地址：location.hash

获取当前路由params参数：his.$route.params.from

获取当前路由query参数：this.$route.query.from

返回上个页面：this.$router.go(-1)

(3)在vue3中使用vue-router

在vue3中使用vue-router更加简洁方便

// router.jsimport { createRouter, createWebHistory } from 'vue-router'import ResourceHome from '@/views/ResourceHome'const routes = [    { path: "/", name: 'base', component: ResourceHome },]const router = createRouter({    history: createWebHistory(), //去掉#号    routes,    linkActiveClass: 'active' //高亮})export default router // main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router'const app = createApp(App)app.use(router)app.mount('#app')

在组件中使用useRouter,useRoute 完成路由跳转和获取路由信息的方式

import { useRouter,useRoute } from 'vue-router';// script  export default {  // 路由跳转    const router = useRouter();    // 路由信息    const route = useRoute();    const id = ref(route.params.id)     setup(){    // 页面加载完成执行    onMounted(()=>{      // 执行submit方法      submit()    })      // methods      const submit = ()=>{          // 提交方法          // 跳转          router.push('/index');      }      return {          // 返回          submit      }    }};script>

基本上对vue3的了解就到此,学会了基本可以在项目中应用了，但还有一些高级的玩法，vue2复用代码用了minixs和slot,在vue3是怎么复用代码的呢，一起去学习吧！！！！

今天就先到这了,祝大家假期愉快！！！

越来越多的人告诉你，认真你就输了，因为他们想让你和他一样

可是认真你就真的输了吗，每个被世界嘲弃过的人，都假装玩世不恭，而你要告诉你自己，不要装逼，认真，努力。

今儿就说到这啦，若文章表述的观点和内容引起不适，随意吐槽哈哈哈哈~~

觉得不错可关注微信公众号哦