【尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程】学习笔记

一小池勺

“音乐会治愈我，运动会治愈我，风景会治愈我，阅读会治愈我，做饭也会治愈我，还有阴雨天的被窝，周末可以肆无忌惮的赖床，我的意思是，我们应该热爱生活。”

---

WeChat

---

引子

快睡觉的时候追的一部剧。

第一集

第二集

第三集

第四集

第五集

第六集

第七集

我得到如下收获：1. 原先在选项式 api 中 data 中声明的数据，可以直接在 setup 函数中声明了，如果想要在模板中使用数据，setup 函数就得做一个值的 return，但是这样直接声明的数据不是响应式的数据了。2. 然后初步使用了这样声明出来的数据，发现可以直接使用，而不用 this，原来是 vue3 当中弱化了 this 的使用。3. 之后也体会到了 methods 的写法的不同，原来是在选项式 api 中定义的方法，现在可以直接在 setup 函数中去使用。4. 然后又了解到 setup 函数的执行时机，我让其与选项式 api 中的 beforeCreate 生命周期钩子做了比较，发现 setup 函数的执行时机居然是比它都要先一步。

第八集

我得到如下收获：setup 的返回值可以将数据、方法交出去，这样模板就可以使用了，然后又了解到了 setup 的返回值也可以是一个渲染函数，可以直接将返回值渲染到页面中去，但是老师没有讲它的使用场景。

第九集

我得到如下收获：在该节我学习到 setup 函数其实是可以与 Options 选项混用的，这里混用了 data、methods、setup 函数，发现 选项式api 中可以通过 this.xxx 访问到 setup 中定义的数据，反之，在 setup 函数中是访问不到 data 中 return 的数据。

第十集

我得到如下收获：我学习到了 setup 语法糖的写法 <script lang="ts" setup> </script> , 这个语法糖挺甜的，当使用到这个语法糖后，里面的数据、方法就相当于是自动 return 出去了，无需我们手动 return 了，此时遇到了一个小问题，就是使用了这个 语法糖之后，export defult { } 这个配置就无法去使用了，这里面有一个name 配置，也就是咱们组件的名字，当然，我们可以写两个 script 标签，一个使用 setup 语法糖，一个用来配置组件命名，其实 vue3 也是考虑到了这一点的，给我们提供了一个插件，安装这个插件后再稍作配置，可以这样给组件命名，<setup name="xxx"> ，当然，实际开发当中也是可以直接以组件的文件名作为组件名也是可以的噢。

第十一集

我得到如下收获：我发现响应式框架都是数据为尊，都是放置在最显眼的位置，以前是在 data 配置中使得数据变为响应式，而在 vue3 可以引入 ref 和 reactive 函数，该集主要是讲了讲 ref 的一个基本的使用，你给这个函数传值就可以了，然后再控制台打印打印，会看到返回的是一个 ref 实例对象，打开这个对象可以看到里面的一个 value 属性，这个就是我们刚才传入的值，当我们想要去对该响应式的值做出修改的时候，我们就需要 xxx.value 进行问候，当然，在模板语法中就没有这么麻烦了，直接用就可以问候这些响应式的值 { { xxxx }}。

第十二集

我得到如下收获：在该集中学习到了使用 reactive 将原对象进行包裹，就可以将该原对象变成一个响应式的对象，而且是一种深层次的响应，不管数据的层次有多深，都是可以将其响应式的，此时对于 reactive 函数包裹的对象，在问候它的值的时候也是同 { {}} 模板语法中的问候方式比较的统一。

第十三集

我得到如下收获：原来这个 ref 函数也是传入这个对象类型数据并将其转为响应式的数据的，通过控制台的打印对比，我发现了 ref 打印的还是 ref 实例对象，reactive 打印的是 proxy，但是 ref 的实例对象的 value 的属性值还是利用到了 reactive，是一个 proxy。此时问候 ref 的响应式处理后的对象数据类型，还是得和之前一样通过 .value 来摸到数据。通过这一集后，用哪个在项目中一把梭比较好呢？我也不知道。

第十四集

我得到如下收获：区别，ref 创建的变量必须使用 .value 来问候 （可以配置 volar 插件自动添加 .value）,reactive 重新分配一个新对象时，会失去响应式（这个时候可以使用 Object.assign 去进行整体替换【例如服务器返回的一个对象】，但是 ref 就不会了，直接覆盖分配就可以了），天宇老师给的使用建议是：1. 若需要一个基本类型的响应式数据，必须使用 ref ,若需要一个响应式对象，层级不深，ref 、reactive 都是可以的，若需要一个响应式对象，且层级较深，推荐使用 reactive。通过这次比较 ： ref 一把梭！

第十五集

我得到如下收获：toRef 可以将一个响应式的对象的每一对 key value 解构出来形成一个新的响应式对象，之后 let { name, age } = toRefs(person)【如果直接解构 person 这个响应式对象，解构出来的数据就不是响应式的了】 ,然后修改的时候就可以 name.value = xxx age,value = xx了；然后这个 toref 就是 可以选定一个响应式对象中的某一个 key，let age = toRef(person, 'age')。而且还有一个特点就是，解构出来的值，做了修改之后，原响应式对象对应的 key 的 value 值也会修改。

第十六集

我得到如下收获：vue3 中的计算属性与 vue2 的写法稍有不同 let fullName = computed(()=> { return xxx + xxx })，并且此时计算出来的 fullName 是一个响应式的数据【computedRefImpl】,在 js中对该计算出的值进行修改的时候，是需要用到 .value 来问候的，但是前面的这个写法只是 computed 的一个默认的写法，也就是所当前的这个计算属性仅仅是可读的，不是可以修改的【注意：我们的某些操作而引起的计算属性的重新计算，这并不是对于计算属性的一个修改】，如果在项目的需求中，要对于这个计算属性要有修改，就得拿出它的一个 set(){}, get(){} 的完整写法，get(){} 中写计算逻辑，set(val){} 里面会接收一个参数，也即是我们调用某个方法传入的修改后的新值【会有引起 set(val){} 调用】，然后可以拿到新值，做一些操作就可以了。并且还算属性相对于方法是有缓存的。

第十七集 — 第二十一集 watch

watch

作用：监视数据的变化（和 Vue2 中的 watch 作用一致）

特点： Vue3 中的 watch 只能监视以下四种数据

1. ref 定义的数据
2. reactive 定义的数据
3. 函数返回值（ getter 函数）
4. 一个包含上述内容的数组

第十七集 情况一：监视【 ref 】定义的【 基本类型数据 】

我的收获如下：直接写要监视的数据名即可，并且，在 Vue.js 中，watch 函数返回一个用于停止监听的函数。这个返回的函数就是用来取消对数据的监听的，从而停止执行回调函数。

<template>
  <div class="person">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{
  {sum}}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {
     ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
     
    sum.value += 1
  }
  // 监视，情况一：监视【ref】定义的【基本类型】数据
  const stopWatch = watch(sum,(newValue,oldValue)=>{
     
    console.log('sum变化了',newValue,oldValue)
    if(newValue >= 10){
     
      stopWatch()
    }
  })
</script><