Vue 3.0 学习笔记之基础知识

smobee

已于 2023-03-05 22:03:11 修改

阅读量463

点赞数

分类专栏： Vue 文章标签：学习

于 2023-03-01 23:01:08 首次发布

本文链接：https://blog.csdn.net/wg8ofk08/article/details/129291883

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

系列文章目录

提示：阅读本章之前，请先阅读目录

前言

Vue 3.0 创建

在这里插入图片描述

与Vue2.0对比的变化

在这里插入图片描述

关闭语法检查

lintOnSave: false

在这里插入图片描述

setup 组合式函数compositions

在这里插入图片描述

第二种，渲染函数

在这里插入图片描述

响应式数据 ref

ref = reference
impl = implement

在这里插入图片描述

在template模板里面，会自动读取.value
通过ref函数，就可以实现响应式数据

在这里插入图片描述

其实，通过ref函数，即可生成一个引用对象，底层上还是用的Object.defindProperty，用的getter和setter方法，其次，这里的value，是通过原型对象实现的，相当于，vue2.0的_data

reactive 函数

在这里插入图片描述

Vue3.0 响应原理

在这里插入图片描述

Vue3.0，真正使用的是Reflect反射，会返回一个布尔值，执行成功返回true，执行失败返回false

在这里插入图片描述

ref 和 reactive 区别

在这里插入图片描述

setup 注意点

在这里插入图片描述

computed 计算函数

在这里插入图片描述

watch 函数

在这里插入图片描述

setup() {
    
    let name = ref("哈哈哈")
    let age = ref(9999)
    let obj = reactive({
      a: "hhhh",
      age: 9999,
      job: {
        a: {
          c: "pppp"
        }
      }
    })

    // 情况1，监视基本类型
    watch(name, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    }, {
      immediate: true
    })

    // 情况2，监视多个基本类型
    watch([name, age], (newValue, oldValue) => {
      console.log(newValue, oldValue)
    }, { deep: false }) // 这里是无法关闭深度监听的

    // 情况3，监视对象，输出的oldValue是和newValue一样的
    watch(obj, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    })

    // 情况4，监视某个属性
    watch(() => obj.a, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    })

    // 情况5，监视某些属性
    watch([() => obj.a, obj.age], (newValue, oldValue) => {
      console.log(newValue, oldValue)
    })

    // 情况6，监视对象里面的对象
    watch(() => obj.job.a.c, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    }, { deep: true }) // 必须的开深度监听


    return {
      name,
      obj
    }
  }