Vue3.0 && Vue3.0初体验 一

前言

前几天同事问我
同事： Vue3.0学了吗?
我:：3.0? 我如今学他干吗,尤大大说最近还会更新2.7呢,如今学了到时候确定忘啊。
同事： Vue3.0 和 React有点像了。
因而：

提醒

这是Vue3.0初体验 第一章， 能用几张章把Vue3.0写完？如今仍是个迷，可能一章,也有可能 两章......，你们一块儿期待吧！

vue2.x -> vue3.0 变化

Vue3.0 能够彻底支持Vue2.0!!!!, 升级之后不须要更改关于Vue的代码,可是你引用的插件就...,看运气了.

在说变化以前，咱们先看一下vue3.0怎么建立项目.

第一种方法：vite

npm init vite-app 项目名
cd 项目名
npm run dev
复制代码

优势: 快就完了. (不须要经过webpack编译)
缺点: 不稳定,还要须要本身安装 vue-router, vuex, (敲重点,vue-router, vuex都要用4.0, 安装的时候还容易出错, enenen,出错确定是我电脑问题, 和vite没有关系....

不稳定也是我的感受,你们能够试一下,vite应该仍是很好用的,否则尤大大也不会连发6条微博来证实

第二种方法

npm install -g @vue/cli
vue create 项目名
vue add vue-next //重点 执行这行,会把2.0代码改成3.0的, vue-router, vuex会变成4.0的
cd 项目名
npm run serve
复制代码

这个优缺点就不说了, 毕竟你们都是老手!

变化一 mian.js

mian.js里的变了 多了createApp方法

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './App.scss'

const app = createApp(App)
app.use(router).use(store).mount('#app');
复制代码

因为这里用了 import { createApp } from 'vue'; 而不是import Vue from 'vue', 全部使用一些Ui框架,以及第三方的包都会报如下的错.

遇到这个报错,基本上就说明你用的这个插件不支持Vue3.0了.

变化二 Vue-router, Vuex

Vue-router, Vuex 有点小变化, 后面第二章再讲,或者也能够看一下个人源码, 大家都是大牛,大家必定能够一会儿就能够看出来区别.

变化三 template模板部分

vue2.0里 template模板里只能有一个根标签, 而3.0可使用多个根标签

Look here, template标签有两个div, 在2.0是会报错的

变化四 Composition API

在vue2.0里咱们都把.vue文件里的js部分叫作Function API, 而在3.0里变为Composition API 这里是变化最大的地方,快看下图

(敲重点: import { setup, watch, reactive, toRefs, onMounted } from "vue")

看到这里有何感想。en， 咱们尚未开始， 重点，Vue3.0新特性来了。

Composition API是什么

setup 函数

setup 函数是一个新的Vue组件， 是Composition API 入口

<template>
</template>
<script>
import { setup } from 'vue'
export default {
   setup(props, context) {
       //这里的props你们应该知道是啥吧，父组件传的值
       // context是什么？
       //在setup()里咱们不能用this
       //因此vue2.0里的 this.$emit, this.$psrent, this.$refs在这里都不能用了。
       //context就是对这些参数的集合
       //context.attrs
       //context.slots
       //context.parent 至关于2.0里 this.$psrent
       //context.root 至关于2.0里 this
       //context.emit 至关于2.0里 this.$emit
       //context.refs 至关于2.0里 this.$refs
       ...
   }
}
</script>
<style>
</style>
复制代码

数据声明

vue2.0 里数据都是在data()里声明， 而在3.0里也取消了data(), 引用了Reactive(), ref()

ref()声明单一基础数据类型时使用

注意： 定义的变量，函数都要 return 出来

<template>
  <div>{{count}}</div>
</template>
<script>
 import { setup， ref } from 'vue'
 export default {
    setup(props, context) {
        let count = ref(0)
        consloe.log(count.value) //0 ，  内部获取时须要用.value来获取
        console.log(isRef(count)) //true   //isRef() 用来判断是否是ref对象
     return {
         count  // ref返回的是一个响应式的对象
     }
    }
 }
</script>
<style>
</style>

复制代码

Reactive()声明单一对象时使用

<template>
 <div>{{data1}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
   setup(props, context) {
        const obj = reacttive({
        data1: '123',
        data2: {}
    })
    
    return {
        ...torefs(obj)// 把obj转为响应式的ref，否则template里获取不到
    }
   }
}
</script>
<style>
</style>

复制代码

watchEffect() 监听props

// 父组件.vue
<template>
   <ZiComp val:'1'/>
</template>
<script>
import { setup } from 'vue'
import ziComp from './ziComp.vue'
export default {
  components： {
      ziComp
  }, //components方法也是和2.0相同
  setup(props, context) {
      
  }
}
</script>
-------------------------------------- 
//ziComp.vue
<template>
 <div>{{obj.data1}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
  props: ['val'], //这里获取props和 2.0 同样,也能够用对象形式
  setup(props, context) {
     watchEffect(() => {  //首次和props改变才会执行这里面的代码
         console.log(props.val)
     })
  }
}
</script>
<style>
</style>
复制代码

watch() 监听器

监听单个数据

<template>
<div>{{count}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
  setup(props, context) {
   let count1 = ref(0)
   let state = reactive({
      count2: 0
   )
    //监听reactive类型
   watch(
   () => state.count2， //这里是你要监听的数据
   (count， preCount) => { //count新值， preCount旧值
       console.log('') //这里是监听数据变化后执行的函数
   }, {lazy： false}//在第一次建立不监听)
   
   //监听ref类型
     watch(count1，(count， preCount) => { //count新值， preCount旧值
       console.log('') //这里是监听数据变化后执行的函数
     })
   
   return {
       count
       ...toRefs(state)
   }
  }
}
</script>
<style>
</style>

复制代码

监听多个数据

<template>
<div>{{count}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
  setup(props, context) {
   let count1 = ref(0)
    let name1 = ref(0)
   let state = reactive({
      count2: 0，
      name2： 'yangy'
   )
    //监听多个reactive类型
   watch(
       [() => state.count2, () => state.name2]
       ([count， name], [preCount， preName]) => { //count新值， preCount旧值
           console.log('') //这里是监听数据变化后执行的函数
       }, 
       {
          lazy： false
   })//在第一次建立不监听
   
   //监听ref类型
  watch(
       [count2, name2]
       ([count， name], [preCount， preName]) => { //count新值， preCount旧值
           console.log('') //这里是监听数据变化后执行的函数
       }, {lazy： false}//在第一次建立不监听)
   
   return {
       count，
       ...toRefs(state)
   }
  }
}
</script>
<style>
</style>

复制代码

computed() 计算属性 可建立只读，和可读可写两种

<template>
<div>{{addCount}}</div>
<div>{{addCount2}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
  setup(props, context) {
   let count = ref(0)
   
  setup () {
      const count = ref(0)
      const addCount = computed(() => count.value + 1) //只读 ，count.value变化后执行加1
      
      const addCount2 = computed({
          get:() => count.value + 1,
          set: (value) => count.value = value 
      })    
      // addCount2.value = 10   //赋值方法
      
     return {
         count,
         addCount,
         addCount2
     }
  }
  }
}
</script>
<style>
</style>

复制代码

前端项目地址 github.com/YangY-19/vu…

Node项目地址 github.com/YangY-19/ko…

这是用Vue3.0写的是一个dome, 新的语法基本上都涉及了, 之后还会去优化.虽然只是个dome,也但愿你给我点个星星鼓励一下.

结束语

本章就讲先到这里吧, 下一章再去写一些关于生命周期, 获取dom, router, vuex这些,你们关注一下吧.
上文都是本身的看法与总结, 若是有写法错误的地方,望指正!若是有其余Vue3.0不清楚的地方,能够在下方评论,一块儿讨论.