vue3.0的使用(简单例子来认识它)

一、官网文档地址：https://v3.vuejs.org/guide/installation.html#release-notes

二、使用

1、安装

首先 npm install vue@next，

然后 yarn global add @vue/cli 或者 npm install -g @vue/cli，

然后在vue项目中运行 vue upgrade --next，

这样初步的vue已经升级到最新的版本。

这里使用最新的构建工具vite，进行构建vue项目

1.npm安装：

npm init @vitejs/app <vue3.0>

2.yarn安装

yarn create @vitejs/app <vue3.0>

然后 npm install 或者 yarn ，拉取相关依赖，再 npm run dev 或者 yarn dev，启动项目。

具体的就不细说了，可以自己去看看vue3.0的文档，这里主要讲个小例子，接着往下看。

二、demo

demo源码地址：https://gitee.com/xieliuping/vue3.0/tree/develop-xlp/

项目文件结构如下：

1、在router.js里，配置好页面路由

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

// createRouter 创建路由实例
const router = createRouter({
  history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
})

// 抛出路由实例, 在 main.js 中引用
export default router

然后在views下的Home.vue,编写文件如下：

<template>
  <div id="app">
    <input type="text" v-model="val" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{todo.title}}</li>
    </ul>
    </div>
  </div>
</template>
<script>
import {reactive, ref, toRefs} from 'vue'
import useConter from './mixin/counter'
import useMouse from './mixin/mouse'
export default {
  setup(){
    let val = ref('')
    let todos = reactive([ 
        {id:0, title:'吃饭', done:false},
        {id:1, title:'睡觉', done:false},
        {id:2, title:'lsp', done:false},
    ])
   
    function addTodo(){
      todos.push({
        id:todos.length,
        title:val.value,
        done:false
      })
      val.value = ''
    }
    return {val, todos, addTodo}
  }
}
</script>

上面的reactive, ref, toRefs 这都是vue3.0的方法，通过setup()函数去更新数据，加载界面。（这里就不细说了）。

然后再yarn dev编译，界面如下：

2、我们讲一下，vue3.0中mixin的使用，和vue2.0有什么不同的地方

首先在views下新建mixin文件夹，在下面新建counter.js，编写内容如下

import {ref, computed} from 'vue'

export default function useCounter() {
  let count = ref(1)
  function add() {
    count.value ++
  }
  function reset() {
    count.value = 1
  }
  let double = computed(() => count.value * 2)
  return {count, double, add, reset}
}

以上是简单是数字+1（add()），和 数字自动计算乘以2 (computed())这两个计算方法；以及reset()重置数字的方法。

这里我们直接在Home.vue里引用它即可；如下：

<template>
  <div id="app">
    <input type="text" v-model="val" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{todo.title}}</li>
    </ul>
    <!-- 数字计算 -->
    <div>
      <span class="item">原数字：{{ count }}</span>
      <span class="item">2倍后数字：{{ double }}</span>
      <button @click="add">点击+1</button>
      <button @click="reset">重置</button>
    </div>
  </div>
</template>

<script>
import {reactive, ref, toRefs} from 'vue'
import useConter from './mixin/counter'
import useMouse from './mixin/mouse'
export default {
  setup(){
    let val = ref('')
    let todos = reactive([ 
        {id:0, title:'吃饭', done:false},
        {id:1, title:'睡觉', done:false},
        {id:2, title:'lsp', done:false},
    ])
    let {count, double, add, reset} = useConter()
    function addTodo(){
      todos.push({
        id:todos.length,
        title:val.value,
        done:false
      })
      val.value = ''
    }
    // count,double 新引入的变量
    // add,reset 就是新引入的方法
    return {val, todos, addTodo, count, double, add, reset}
  }
}
</script>
<style scoped>
.item {
  display: block;
}
button {
  margin-top: 15px;
}
</style>

思考以及探讨：

如果mixin，引入的变量和方法如果重复，会不会有什么问题呢？

其实在vue2.0，引入mixin会有可能性的问题，如果变量和函数名称重复之后，会导致混乱，某些变量和函数失效；而且也很不清晰，所以在vue3.0中就很好解决了这一点。怎么来实现呢？请接着往下看...

在views的mixin文件夹下新建mouse.js文件；

我们来实现下鼠标移动获取鼠标所在位置的横坐标，代码如下：

import { ref, onMounted, onUnmounted, computed } from 'vue'

export default function useMouse() {
  let x = ref(0)
  function update(e) {
    x.value = e.screenX
  }
  // 这里故意弄的变量和counter.js里的一致；更好体现出它的神奇之处~~
  let double = computed(() => x.value*2)
  onMounted( () => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted( () => {
    window.removeEventListener('mousemove', update)
  })
  return { x, double }
}

在Home.vue里引入mouse.js，代码如下：

// 这里包含了前面的所有代码，引入了两个mixin文件，
// 仔细看的朋友可以发现，double这个变量重名了，但是可以用es6的{}解构赋值，可以避免这个问题
<template>
  <div id="app">
    <input type="text" v-model="val" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{todo.title}}</li>
    </ul>
    <!--  -->
    <div>x坐标<span style="text-align: left;">{{ doubleX }}</span></div>
    <!--  -->
    <div>
      <span class="item">原数字：{{ count }}</span>
      <span class="item">2倍后数字：{{ double }}</span>
      <button @click="add">点击+1</button>
      <button @click="reset">重置</button>
    </div>
  </div>
</template>

<script>
import {reactive, ref, toRefs} from 'vue'
import useConter from './mixin/counter'
import useMouse from './mixin/mouse'
export default {
  setup(){
    let val = ref('')
    let todos = reactive([ 
        {id:0, title:'吃饭', done:false},
        {id:1, title:'睡觉', done:false},
        {id:2, title:'lsp', done:false},
    ])
    let {count, double, add, reset} = useConter()
    // 把double复制给doubleX
    let {x, double:doubleX} = useMouse()
    function addTodo(){
      todos.push({
        id:todos.length,
        title:val.value,
        done:false
      })
      val.value = ''
    }
    // 引入了x, doubleX
    // 这样在界面中就可以直接去呈现了，现在界面只使用到x......
    return {val, todos, addTodo, count, double, add, reset, x, doubleX}
  }
}
</script>
<style scoped>
.item {
  display: block;
}
button {
  margin-top: 15px;
}
</style>

这样界面就展示这样：见下图：

这样，三大块的信息就正确无误的呈现出来了，互相也不会干扰。。

喜欢的朋友可以点赞关注哈~~~

编写不易~~ 继续搬砖去了！！！！