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

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

前言

前几天同事问我
同事： 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](/user/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)
        console.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>

前端项目地址 https://github.com/YangY-19/vue3-dome.git

Node项目地址 https://github.com/YangY-19/koa2-weibo.git

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

结束语

本章就讲先到这里吧, 下一章再去写一些关于生命周期, 获取dom, router, vuex这些,大家关注一下吧.
上文都是自己的见解与总结, 如果有写法错误的地方,望指正!如果有其他Vue3.0不清楚的地方,可以在下方评论,一起讨论.

前言

提醒