首页 > 其他分享 >Vue——stateMixin【十五】

Vue——stateMixin【十五】

时间:2023-04-23 14:14:34浏览次数:37  
标签:function set stateMixin Vue 十五 props data options

前言

经过initMixin再接下来就到了stateMixin,接下来咱们就看看stateMixin中到底有什么;

内容

stateMixin位于src/core/instance/state.ts下;

export function stateMixin(Vue: typeof Component) {
  // flow somehow has problems with directly declared definition object
  // when using Object.defineProperty, so we have to procedurally build up
  // the object here.
 // $data
  const dataDef: any = {}
  dataDef.get = function () {
    return this._data
    }
 // $props
  const propsDef: any = {}
  propsDef.get = function () {
    return this._props
    }
    // 开发环境下针对set行为的警告
  if (__DEV__) {
      dataDef.set = function () {
        // 不可以替换根实例上的$data
      warn(
        'Avoid replacing instance root $data. ' +
          'Use nested data properties instead.',
        this
      )
      }
    // $props是只读的
    propsDef.set = function () {
      warn(`$props is readonly.`, this)
    }
    }
    // 将dataDef和propsDef 添加到原型链上
  Object.defineProperty(Vue.prototype, '$data', dataDef)
  Object.defineProperty(Vue.prototype, '$props', propsDef)

  // 将set和del方法挂载到原型链上 || 位于observer/index.ts
  Vue.prototype.$set = set
  Vue.prototype.$delete = del

  // $watch方法定义
  Vue.prototype.$watch = function (
    expOrFn: string | (() => any),
    cb: any,
    options?: Record<string, any>
  ): Function {
    const vm: Component = this
    if (isPlainObject(cb)) {
      return createWatcher(vm, expOrFn, cb, options)
    }
    options = options || {}
      options.user = true
      // 位于obeserver/watcher.ts
      const watcher = new Watcher(vm, expOrFn, cb, options)
      // 深度监听
    if (options.immediate) {
      const info = `callback for immediate watcher "${watcher.expression}"`
      pushTarget()
      invokeWithErrorHandling(cb, vm, [watcher.value], vm, info)
      popTarget()
    }
    return function unwatchFn() {
      watcher.teardown()
    }
  }
}

总结

1. $data定义
2. $props定义
3. $set定义
4. $delete定义
5. $watch定义

标签:function,set,stateMixin,Vue,十五,props,data,options
From: https://www.cnblogs.com/wangyang0210/p/17346343.html

相关文章

  • vue 3.0 windows node切换
    '"bash"'不是内部或外部命令,也不是可运行的程序或批处理文件。https://blog.csdn.net/cnds123321/article/details/121257762超级管理运行cmdC:\ProgramFiles\nodejs>gnvmlistUsage:gnvm[flags]gnvm[command]AvailableCommands:config......
  • vue项目结合,vant 实现中轮播图中,点击图片放大图片
    思路:vant中提供函数ImagePreview给原每一个图片子元素设置点击事件,api中提供initial-swipe索引,拿到原图索引设置change事件,保存大图切换的对应索引给到自己的initial-swipe索引中设置图片预览切换时,根据切换后的索引,设置原图的位置,大图原图同步原图片swipeTo(i)切换到......
  • 十五年程序员从零开始学C#系列之(一)——Literals 字面量
    一、概念在计算机编程中,Literals(字面量)是指在程序中直接表示数据的一种方式。它们是在代码中出现的固定值,与变量不同,它们没有名称或标识符。Literals可以用于各种数据类型,包括整数、浮点数、布尔值、字符和字符串等。下面是一些常见的Literals类型:整数(IntegerLiterals):整数L......
  • vue学习 第四天 css ---元素显示模式 display
     导学: 1)设置元素显示模式display2)block(块)、inline(行内)、inline-block(行内块)3)每一种元素模式的特点 1、元素显示模式:  独占一行 (块元素)和 共用一行(行内元素)HTML元素一般分为块元素和行内元素两个类型。 2、块元素:<h1>~<h6>、<p>、<div......
  • vue实现的常见的动画效果
    本文包括的动画:zoom-inzoom-in-leftzoom-in-rightzoom-in-topzoom-in-bottomzoom-in-center-xzoom-in-center-yslideslide-leftslide-rightslide-topslide-bottomzoom-in-left.ivy-zoom-in-left-enter-active,.ivy-zoom-in-left-leave-active{transition:all0.3sease;......
  • 可视化大屏的终极解决方案居然这么简单,vue-autofit一行全搞定!
    可视化大屏适配/自适应现状可视化大屏的适配是一个老生常谈的话题了,现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢?因为目前市面上适配工具每一个都无法做到完美的效果,做出来的东西都差不多,最终实现效果都逃不出白边的手掌心,可以解决白边问题的,要么太......
  • vue3 create-vue 开启vite自动验证eslint
    0.vue3 cli推荐新的构建工具vite,但没有yarnrundev后并不自动检测eslint规则,需要运行yarnruneslint1.添加组件即可 yarnadd vite-plugin-eslint--dev 2.在vite.config.js加入1import{fileURLToPath,URL}from'node:url'23import{defineConfig}......
  • 前端必须学会的vueh5布局瀑布流 简易通俗易懂 左右排版
    css简易版瀑布流布局通过v-if="index%2===0"v-if="index%2===1"进行判断显示左边右边左右瀑布流排版,在每一列中交替地排放元素。具体来说,可以通过对每一列进行编号,然后对奇数列和偶数列分别设置不同的样式来实现左右瀑布流排版。html<div><cl-pull-refreshv-model="isR......
  • ant design of vue的a-rang-picker时间控制既不能选今天以后的日期且开始时间跟结束时
    在项目中这个问题在困扰我,虽然我知道它是有一个Api是disableDate来控制时间的选择;但是只能够实现开始时间跟结束时间之间差不能超过3天。效果图接下来就是代码时间呀<a-col><a-form-model-itemlabel="任务时间范围"prop="priceRangeDate"><a-range-picker......
  • vue3 keep-alive实现tab页面缓存
    先上图 如何在我们切换tab标签的时候,缓存标签最后操作的内容,简单来说就是每个标签页中设置的比如搜索条件及结果、分页、新增、编辑等数据在切换回来的时候还能保持原样。看看keep-alive是如何实现该功能的。首先我们要了解keep-alive的基本使用。具体介绍请查看官方文档(htt......