Vue3快速上手，知道这几点就行了

目录

创建一个vue项目

分析代码

setup()与 setup 语法糖

ref（）

reactive()

watch函数

生命周期函数

ref操作组件-defineExpose

跨级组件通讯provide 与inject 函数

父传子

        vue3之mixin

toRef 与 toRefs

vue3的响应式原理

---

创建一个vue项目

(在确保node为16+版本情况下)

 新建项目的两种方法：

1. vue-cli创建

vue -V 查看版本 @vue/cli 为4.5.0

npm install -g @vue/cli

// 创建项目，选择vue3一栏，enter
vue create vue-item


// 启动，在vue-item 项目内启动
npm run serve

2.vite创建（推荐方法）

vite 是新一代的构建工具，在开发环境中，可快速冷启动，按需编程，不再等待整个应用加载完毕。是未来的趋势。

#创建
npm init vite-app my-vite

#进入
cd my-vite

#安装
npm install

#启动
npm run dev

分析代码

//  引入一个工厂函数，从vue中
import { createApp } from 'vue'
// 创建一个vue的对象
import App from './App.vue'

// 工厂函数，创造出一个vue的实例对象
createApp(App).mount('#app')

createApp(App).mount('#app')

打印create(App)可以看见如下

setup()与 setup 语法糖

setup语法糖：Vue3.2 中引入了setup语法糖， 只需要在 script 标签上加上 setup 属性，无需 return，可以在template模板中直接使用。（引入自掘金文章《Vue3中setup语法糖使用总结》）   关于这一部分：大家可以看官方文档（setup语法糖）

ref（）

用来做数据绑定的，最好是简单的数据类型的绑定。

<template>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>爱好：</h2>
    <button @click="say">改变</button>
</template>

<script>
// 这里需要引入ref
import {ref} from 'vue';

export default {
  name: 'App',
  setup(){
// 用ref()包裹
    let name = ref('lili')
    let age = ref(18)

    function say() {
// 用数据.value 取值
      age.value = 20
      name.value = 'zhouzhousa'
      alert("我改了啊啊啊");
    }

    return {
      name,
      age,
      say
    }
  }
}
</script>

打印出来得到这种 RefImpl{} 实例对象

---

 

 通过get 与 set 来修改数据

reactive()

复杂的数据类型的绑定。

<template>
    <h2>姓名：{{ mima.name }}</h2>
    <h2>年龄：{{ mima.age }}</h2>
    <h2>爱好：</h2>
    <button @click="say">改变</button>
</template>

<script>
import {ref , reactive } from 'vue';

export default {
  name: 'App',
  setup(){
    let mima = {
      name:  'lili',
      age:   18,
      list: ['11','22','123','1223']
    }

    reactive(mima)

    function say() {
      mima.name = 'wuuwuw'
      mima.age = 20
      console.log(mima);
      mima.list[0] = 'xiaosi'
      console.log(`${mima.name} 今年是${mima.age} , ${mima.list[2]}`);
    }

    return {
      mima,
      say
    }
  }
}
</script>

打印发现

引入了es6新特性， 

watch函数

监测数据的变化 监听多个响应式数据.

键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

如果传入多个需要监听的数据，可以用下列的数组的方式。

<script>
     const count = ref(1)
    // 复杂类型要用 reactive 才能被检测
    const per = reactive({
      name: 'lili',
      age:19
    })

    const addOne = ()=>{
      count.value++
    }
    watch([count,per],()=>{
      console.log("观测改变");
    })

    setTimeout(() => {
      per.age = 200
    }, 3000);

</script>

监听对象中的一个属性的变化

const count = ref(1)
    // 复杂类型要用 reactive 才能被检测
    const per = reactive({
      name: 'lili',
      age:19
    })

    const addOne = ()=>{
      count.value++
    }
   
    // 检测对象数据的一个数据，简单类型
    // watch(()=> 数据，改变后回调函数)
    watch(() => per.name, ()=>{
      console.log("数据改变");
    })

    setTimeout(() => {
      per.name = '222'
    }, 3000);

监听响应式对象数据的一个数据，复杂类型。watch(()=>数据, 改变后回调函数, {deep: true})

// 监听响应式对象数据的一个数据，复杂类型
  // watch(()=>数据, 改变后回调函数, {deep: true})
    const count = ref(1)
    // 复杂类型要用 reactive 才能被检测
    const per = reactive({
      name: 'lili',
      age:19,
      wa: {
        class: '112',
        number: 90
      }
    })
   
   
    watch(
    () => per.wa, 
    ()=>{
      console.log("数据改变");
    },
    {
      deep: true
    })

    setTimeout(() => {
      per.wa.class = '222'
    }, 3000);

生命周期函数

onMounted() 用的最多

ref操作组件-defineExpose

使用 <script setup> 的组件是默认关闭的，组件实例使用不到顶层的数据和函数。

我们要通过 defineExpose() 把数据暴露出来

跨级组件通讯provide 与inject 函数

• App是后代组件依赖的数据和函数的提供者，Child是注入（获取）了App提供的依赖

• provide和inject是解决跨级组件通讯的方案

  • provide 提供后代组件需要依赖的数据或函数
  • inject 注入（获取）provide提供的数据或函数
• 测试代码

App.vue

<template>
    <div>
        <Father></Father>
    </div>
</template>

<script setup>
import Father from '@/components/Father'
// 父组件，测试跨级组件通讯
import {ref , provide} from 'vue'

// 此处将值传给孙子组件
const count = ref(1)

provide('count',count)

</script>

Father.vue

<template>
    <div>
        <h1>这里是父亲组件</h1>
        <son></son>
    </div>
</template>

<script setup>
// 父组件，测试跨级组件通讯
import son from '@/components/Son.vue'
</script>

Son.vue

<template>
    <div>
        <h2>这里是孙子组件</h2>
        <h2>在此处获取前辈组件的值 {{ count }}</h2>
    </div>
</template>

<script setup>
import { inject } from "vue";

// 孙组件，测试跨级组件通讯
const count = inject('count')
</script>

父传子

使用defineProps与defineEmits

测试代码

父组件

<template>
    <div>
        <h1>这里是父亲组件</h1>
        <son :flower="flower" @dailyActivites="dailyActivities" :fish="fish"></son>
    </div>
</template>

<script setup>
// 父组件，测试跨级组件通讯
import son from '@/components/Son.vue'
import {ref} from 'vue'

// 子传父测试
const flower = ref('fish')
const fish = ref("goldfish")

const dailyActivities = ()=>{
    console.log("浇水活动");
}

// 父传子测试
</script>

子组件

<template>
    <div>
        <h2>父组件数据{{ flower }} {{ fish }}</h2>
        <button @click="fn">父组件函数</button>
    </div>
</template>

<script setup>
import { inject ,ref} from "vue";


// 下面是子传父
const color = ref('red')


// 父传子数据接收用defineProps

defineProps(['flower','fish'])

// 子组件中定义接收父组件传过来的方法
const emit = defineEmits(['dailyActivites'])

const fn = ()=>{
    emit("dailyActivites")
}
</script>

这里，有讲得比较详细：Vue3 子组件向父组件传值的方法_vue3子组件给父组件传值_thonmsneee98的博客-CSDN博客

vue3之mixin

即为抽离出经常会调用的函数代码把它封装起来。因为函数式编程就是通过减少移动的部分让代码更好理解。（注意：vue3之minxin,并非官方的一种说法）

此处举例：
在vue3项目中监听鼠标坐标。

 建文件夹 hooks

内部写

import { onMounted, onUnmounted, reactive } from "vue";

export default function(){
    const position = reactive({
        x: 0,
        y: 0
      })
      
      function getPoint(e){
          position.x = e.pageX
          position.y = e.pageY
      }
      
      // 组件加载之后才可检测鼠标位置
      onMounted(()=>{
        window.addEventListener('click',getPoint)
        console.log(111);
      })
      
      // 不用了之后可以卸载，以防干扰
      onUnmounted(()=>{
       window.removeEventListener('click',getPoint)
      })

      return position
}

app.vue

<template>
  <div>当前鼠标点击位置为x:{{ position.x }} ,y: {{ position.y  }}</div>
</template>

<script setup>
import userPoint from '@/hooks/usePoint'

const position = userPoint()


</script>

<style>

</style>

toRef 与 toRefs

 多用于解构数据渲染到页面上时，简化。 toRefs 与 toref() 可以保持数据的响应不变，而且其实现是引用，而非创建。（暂时没想到有啥用途）

vue3的响应式原理

与vue2响应式比较：

测试vue2的新增属性

新增一个hobby属性，发现无法响应式，打印看结果：

发现对象新增属性，hobby 中没有 get 与 set  因此无法实现响应式。其他的也同样。

<template>
  <div id="app">
    <h2>姓名：{{ mima.name }}</h2>
    <h2>年龄：{{ mima.age }}</h2>
    <h2>爱好：{{ mima.hobby }}</h2>
    <h2>数组: {{ this.mima.list }}</h2>
    <button @click="createNew">新增</button>
    <button @click="changeHobby">改变一下hobby</button>
    <button @click="deleteOne">删除</button>   
    <button @click="modArray">修改</button>   
  </div>
</template>

<script>



export default {
  name: 'App',
  components: {
    
  },
  data(){
    return{
      mima: {
        name: 'lolo',
        age: 16,
        list: ['a','b']
      }

    }
  },
  methods:{
    createNew(){
      this.mima.age = 20
      this.mima.name = 'lili'
      // this.mima.hobby = 'drawing'
      // 下面方式变成响应式
      this.$set(this.mima,'hobby','drawing')
    },
    changeHobby(){
      this.mima.hobby = 'singing'
    },
    deleteOne(){
      // 删除一个元素,这为非响应式
      delete  this.mima.hobby
     
    },
    modArray(){
      // 下面方法，没有实现响应式
      // this.mima.list[2] = 'c'
      // 要这样才有
      this.$set(this.mima.list,2,'c')
      console.log(this.mima.list);
    }

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这里要聊一下，vue2通过 Object.defineProperty() 这个js方法来实现的数据双向绑定理。

这是关于Object.defineProperty() 的一篇文章十分钟理解Object.defineProperty() - 掘金

（我看了一下，没看懂）

但我下面提供了测试代码(建一个 test.html文件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name: 'lili',
            age: 18
        }
        // 模拟vue2 的响应式实现
        // 注意： Object.defineProperty() 不是 Object.definePropertie()
        let p = {}
        Object.defineProperty(p,'name',{
            get(){
                return person.name
            },
            set(value){
                // 在此处实现响应
                console.log("有人修改了name");
                person.name = value
            }
        })

        Object.defineProperty(p,'age',{
            get(){
                return person.age
            },
            set(value){
                // 在此处实现响应
                console.log("有人修改了name");
                person.age= value
            }
        })
    </script>
</body>
</html>

右键浏览器，打开

vue3的原理：

借助了 proxy 属性。

proxy属性（Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等））

测试代码：

<script type="text/javascript">
        let person = {
            name: 'lili',
            age: 18
        }
        const b = new Proxy(person,{ })
</script>

 这样：

vue3是使用Proxy() get()，set()  reflect() 来实现数据响应式的，关于relect()这部分我就不做展示了。大家自行了解。

记得点赞关注哦，爱你。

读书如譬若掘井，掘数十井而不及泉，不如掘一井而见泉。