vue3.0 上手体验

1. 第一步，安装 vue-cli：

   npm install -g @vue/cli

2. 第二步 ，安装成功后，我们即可使用 vue 命令，测试方法：

   $ vue -V
   @vue/cli 4.5.9

3. 第二步，初始化 vue 项目：

   vue create vue-text

4. 第三步，输入命令后，会出现命令行交互窗口，这里我们选择 Manually select features：

   Vue CLI v4.5.9
   ? Please pick a preset: 
     default (babel, eslint) 
   ❯ Manually select features 

5. 基本公司需要：Router、Vuex、CSS Pre-processors 和 Linter / Formatter：

   Vue CLI v4.3.1
   ? Please pick a preset: Manually select features
   ? Check the features needed for your project: 
    ◉ Babel
    ◯ TypeScript
    ◯ Progressive Web App (PWA) Support
    ◉ Router
    ◉ Vuex
    ◉ CSS Pre-processors
   ❯◉ Linter / Formatter
    ◯ Unit Testing
    ◯ E2E Testing

6. 选择版本：

    vue 2.x
   >vue 3.x

7. 启动项目：

   cd vue-text
   npm run serve

vue3.0 响应式：

1. 1.setup是composition-api的入口函数 
2. 2.在声明周期beforeCreate事件之前被调用；
3. 3.可以返回一个对象，这个对象的属性被合并到渲染上下文，并可以在模板中直接使用；
4. 接收props对象作为第一个参数，接收来的props对象，可以通过watchEffect监视其变化。
5. 接受context对象作为第二个参数，这个对象包含attrs，slots，emit三个属性。

     直接返回的不是一个响应式数据

•  <template>
•   <div class="hello">
•     <h1>{{ msg }}</h1>
•   </div>
•  </template>
•  <script>
•   export default {
•   setup () {
•    return { msg: 1 }
•   }
• </script>

定义响应式数据:

•  ref

• 通过ref定义响应式数据 
• 引入ref

1. import { ref } from 'vue'

• setup () {
• const msg = ref(123)
• return { msg }
• }

• reactive

• 通过reactive定义响应式数据 
• 引入reactive
•  
• import { reactive } from 'vue'
• setup () {
• const state = reactive({ msg: 'hello world' })
• return {
• state
• }
• }

• ref 和 reactive共用

• setup () {
• const state = reactive({ num: 123 })
• const msg = ref('hello vue3.0')
• return {
• msg,
• ...state
• }
• }

• 定义方法修改数据

• 1.定义方法修改ref数据

• 这里的 numsub方法不再需要定义在 methods 中，

  但注意更新 num 值的时候不能直接使用 num--，而应使用 num.value--，

• <template>

    <div class="hello">

•     <h1>{{ msg1 }}</h1>

      <h2> num：{{ num }}</h2>

      <button @click="numSub">Num减</button>

    </div>

  </template>

   

  <script>

  import { reactive, ref} from 'vue'

  export default {

    name: 'HelloWorld',

    setup () {

      const msg1 = ref('hello vue3.0')

      const num1 = ref(123)

      const numSub = () => {

        num1.value--

      }

      return {

        numSub,

        msg1,

      }

    }

  }

  </script>

   

2.定义方法修改reactive数据

1. 通过…展开的reactive定义的数据不能响应，需要toRefs转换为ref方式
2. 引入 reactive 
3.  import {  reactive, ref, toRefs } from 'vue'

<template>

<div class="home">

<h2>num：{{ num }}</h2>

 

<button @click="numAdd">Num加</button>

 

</div>

</template>

 

<script>

import { reactive, toRefs } from "vue";

 

export default {

name: "Home",

 

setup() {

const state = reactive({

num: 0,

});

 

const numAdd = () => {

state.num++;

};

return {

numAdd,

 

...toRefs(state),

};

},

};

</script>

监听

1.监听器 watch 同样是一个方法，它包含 2 个参数，2 个参数都是 function：

       2.第一个参数是监听的值，state.num, 表示当 state.num, 发生变化就会触发监听器的回调函数，即第二个参数，第二个参数可以执行监听时候的回调

// 监听

watch(() => state.num, (newValue, oldValue) => {

console.log('num变化了', newValue, oldValue)

})

2. 如果是2 个以上的监听属性 就这样

        watch(
               [refA, () => refB.value],
                    ([a, b], [prevA, prevB]) => {
                   console.log(`a is: ${a}`)
                  console.log(`b is: ${b}`)
             }
           )

    计算属性

// 计算

const dbleNum = computed(() =>

num1.value * 2

)

   获取路由信息

     引入useRouter, useRoute

     import { useRouter, useRoute } from 'vue-router'

   // 通过useRoute获取当前路由信息,path、query、params

   // createWebHistory：用来使用history模式的路由

  / / createWebHashHistory：用来使用hash模式的路由

 setup () {

/ /导航跳转

const router = useRouter()

const goHome = () => {

router.push({

path: '/about',

query: {

id: 1111

}

})

}

// 获取路由信息

const route = useRoute()

console.log(route.path)

console.log(route.query)

// 获取路由

// Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文，

// ctx.$router 是 Vue Router 实例，里面包含了 currentRoute 可以获取到当前的路由信息

const { ctx } = getCurrentInstance()

console.log(ctx.$router.currentRoute.value)

 

}

 

   生命周期的变化

        使用生命周期需要引入

      import { onUpdated, onUnmounted ,onBeforeMount} from 'vue'

 beforeCreate -> 使用 setup()

created -> 使用 setup()

beforeMount -> onBeforeMount

 mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

 errorCaptured -> onErrorCaptured

 createRouter: 用来创建路由对象

Vuex 集成

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    test: {
      a: 1
    }
  },
  mutations: {
    setTestA(state, value) {
      state.test.a = value
    }
  },
  actions: {
  },
  modules: {
  }
})

这里我们通过计算属性来引用 Vuex 中的状态：

const a = computed(() => ctx.$store.state.test.a)

更新 Vuex 状态

更新 Vuex 状态仍然使用 commit 方法，这点和 Vuex 3.0 版本一致：

  const update = () => {
        ctx.$store.commit('setTestA', count)
      }

<template>

 

源码与上述有出入 大致都一样

<div class="hello">

<h1>{{ msg1 }}</h1>

<h2> num：{{ num }}</h2>

<h2>num1：{{num1 }}</h2>

<h3> 计算结果：{{dbleNum}}</h3>

<button @click="numAdd">Num加</button>

<button @click="numSub">Num减</button>

<button @click="update">update a</button>

<button @click="goHome">路由导航</button>

</div>

</template>

 

<script>

import { computed, reactive, ref, toRefs, watch, getCurrentInstance } from 'vue'

import { useRouter, useRoute } from 'vue-router'

export default {

name: 'HelloWorld',

setup () {

const msg1 = ref('hello vue3.0')

const num1 = ref(123)

const state = reactive({

num: 0

})

const numAdd = () => {

console.log(111)

state.num++

}

const numSub = () => {

num1.value--

if (num1.value === 111) {

msg1.value = 'vue3.0'

}

}

// 监听

watch(() => state.num, (newValue, oldValue) => {

console.log('num变化了', newValue, oldValue)

})

// 计算

const dbleNum = computed(() =>

num1.value * 2

)

// 导航跳转

const router = useRouter()

 

const goHome = () => {

router.push({

path: '/home',

query: {

id: 1111

}

})

}

// 获取路由信息

const route = useRoute()

console.log(route.path)

console.log(route.query)

// 获取路由

// Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文，

// ctx.$router 是 Vue Router 实例，里面包含了 currentRoute 可以获取到当前的路由信息

const { ctx } = getCurrentInstance()

console.log(ctx.$router.currentRoute.value)

// vueX

const a = computed(() => ctx.$store.state.test.a)

console.log(a)

const update = () => {

ctx.$store.commit('setStateA', num1)

// this.$store.commit('setToken', res.token)

}

console.log(update)

return {

numSub,

numAdd,

...toRefs(state),

msg1,

num1,

dbleNum,

a,

update,

goHome,

route

}

}

}

</script>

 

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="less">

h3 {

margin: 40px 0 0;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: inline-block;

margin: 0 10px;

}

a {

color: #42b983;

}

</style>