vue3入门

创建项目

vue3可以通过在终端中运行以下命令，使用 Vite 快速构建 Vue 项目。

# npm 6.x
$ npm init vite@latest <project-name> --template vue

# npm 7+，需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

或者运行以下命令（个人推荐），使用 Vite 快速构建 Vue 项目。

$ vue init vite-app <project-name>

vite相比vue-cli省去了安装依赖的过程，极大的创建项目的速度，相应的，创建好项目后，需要进入项目，手动安装依赖。

另外，不同于vue-cli，vite无法在创建项目的过程中配置vue-router和vuex，如需在项目中使用，需要手动安装依赖并编写配置文件。

setup的使用

1、响应式变量

setup 的执行顺序在 beforecreate 之前，我们可以在 setup 中定义响应式变量。

（1）基本数据类型

基本数据类型响应式变量需要使用ref，ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

import {ref} from 'vue'
export default {
    setup(){
        // 普通方式定义基本数据类型变量无法做到响应，即你在某个地方改变了str的值，页面中使用str的部分也不会重新渲染
        let str = 'hello world';

        let msg = ref('hello vue3');

        function changeMsg(){
            // ref 对象需要访问 value 属性才能改变它的值
            msg.value = 'hello vue3 hahah'
        }

        // 这里必须return
        return {
            msg,
            str,
            changeMsg
        }
    }
}

（2）引用数据类型

引用数据类型响应式变量需要使用reactive，reactive返回一个proxy对象。

import {reactive} from 'vue'
export default {
    setup(){
        // 普通方式定义引用数据类型变量也无法做到响应
        let obj = {
            name:'zhangsan',
            age:20
        }
        
        
        let habit = ref('vue');
        
        let person = ref({
            name:'zhangsan',
            age:20,
            // 当将 ref 分配给 `reactive` property 时，ref 将被自动解包。
            habit:habit
        });

        // 引用数据类型可以通过 key 直接拿到和修改 value 以及删除
        function getHabit(){
            console.log(person.habit);// vue
        }
        function update(){
          person.name = 'lisi'
        }
        function del(){
          delete person.age
        }
        function add(){
          person.city = 'nanjing'
        }

        // 这里必须return
        return {
            habit,
            obj,
            person,
            update,
            del,
            add,
            getHabit
        }
    }
}

2、computed计算属性

在setup中使用计算属性需要引入computed组件选项。

import {computed} from 'vue'
export default {
    setup(){
       let msg = ref('hello vue3');
       let msg2 = computed( ()=> msg+'123' )
       
       return {
           msg,
           msg2
       }
    }
}

3、watch监听器

在setup中使用计算属性需要引入watch组件选项。

（1）基本数据类型

import {computed} from 'vue'
export default {
    setup(){
       let msg = ref('hello vue3');
       
       function changeMsg(){
           msg.value = prompt()
       }
       
       // 第一个参数为监听的变量，第二个参数为变量值改变时的回调函数，接收两个参数
       // 第三个可选参数为配置对象，immediate为true表示一进入页面就执行
       watch(msg,(newVal,oldVal)=>{
          console.log('新值：',newVal);
          console.log('旧值：',oldVal);
        },{immediate:true})
        
       return {
           msg,
           changeMsg
       }
    }
}

（2）引用数据类型

import {computed} from 'vue'
export default {
    setup(){
       let obj = reactive({
          name:'zhangsan',
          age:18
       })
       
       // 如果指向监听对象的某个属性，需要使用箭头函数
       watch(()=>obj.age,(n,o)=>{
          console.log(n,o);
       },{immediate:true})
        
       function update(){
          obj.name = 'lisi'
       }
        
       function del(){
          delete obj.age
       }
       function add(){
          obj.age = 20
       }
        
       return {
           obj，
           update，
           add，
           del
       }
    }
}

4、组件传值

（1）props 和 emit

// App.vue
<template>
    <comp-a :msg="msg" @changezi="changezi" />
</template>

<script>
import {ref} from 'vue'
import CompA from './components/CompA.vue'

export default {
    setup(){
       let msg = ref('hello vue3')       
       
       function changezi(val){
          msg.value = val
       } 
       
       return {
           msg,
           changezi
       }
    }
}
</script>

// CompA.vue
<template>
    <h1>{{msg}}</h1>
</template>

<script>
export default {
    name:'CompA',
    props:['msg'],
    // setup 接收两个参数 props、context
    // props不能解构
    // 通过context可以访问 attrs, slots, emit, expose，可以解构

    setup(props,{emit}){
        function changeZ(){
            emit('changezi','因为有你，温暖了四季')
        }
        return {
            changeZ
        }
    }
}
</script>

（2）provide和inject

// App.vue
<template>
    <comp-b />
</template>

<script>
import {reactive} from 'vue'
import CompB from './components/CompB.vue'

export default {
    setup(){
       let obj = reactive({
           name:'zhangsan',
           age:30
       })       
       
       provide('info',obj)
       
       return {
           obj
       }
    }
}
</script>

// CompB.vue
<template>
  <h1>{{info}}</h1>
</template>

<script>
import { inject } from 'vue'
export default {
    setup(){
        const info = inject('info')
        return {
            info
        }
    }
}