上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]Data Property 和方法

[复制链接]
  • TA的每日心情
    无聊
    2022-4-18 01:37
  • 签到天数: 30 天

    [LV.5]常住居民I

    302

    主题

    2582

    帖子

    2650

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2650

    猫咪币纪念章

    发表于 2022-2-9 19:29:35 | 显示全部楼层 | 阅读模式

    前文

    Vue系列基本属于我直接对抄vue的官方指南+自己平时开发的理解写的

    其实意义和知识浓度并不大

    甚至某种意义可以算是无聊的抄袭了

    主要是因为如果不衔接vue往后的断层实在太大了

    Data Property

    组件的data选项是一个函数,在vue组件实例化的时候会调用函数,返回一个对象

    并且将该对象的所有属性都变成响应式的内容

    const app = Vue.createApp({
      data() {
        return { count: 4 }
      }
    })
    
    const vm = app.mount('#app')
    
    console.log(vm.$data.count) // => 4
    console.log(vm.count)       // => 4
    
    // 修改 vm.count 的值也会更新 $data.count
    vm.count = 5
    console.log(vm.$data.count) // => 5
    
    // 反之亦然
    vm.$data.count = 6
    console.log(vm.count) // => 6
    

    这里之所以data是一个函数,是因为如果是对象,会导致所有的相同组件都会共享一个data属性

    当我们对data()函数里返回一个对象后

    vue实例初始化的时候,首先会遍历该对象挂在到$data属性上

    在同时挂在到vue实例上,使用的是obejct.defineproperty

    如果我们访问vue实例对象的属性,则通过get函数找到$data,然后再读取值

    所以说二者是等价的,但是平时我们不建议使用$data属性来进行访问

    响应式无论是在vue2或vue3的时候都是需要一定的损耗的

    所以需要模板进行响应的时候我们在data函数里写入

    如果并不需要,仅需要设置固定数据或需要存储一些东旭,并不需要响应式

    我们可以考虑直接对vue实例设置对应数据

    如vm.a=6或在created使用this.a=6

    方法

    const app = Vue.createApp({
      data() {
        return { count: 4 }
      },
      methods: {
        increment() {
          // `this` 指向该组件实例
          this.count++
        }
      }
    })
    
    const vm = app.mount('#app')
    
    console.log(vm.count) // => 4
    
    vm.increment()
    
    console.log(vm.count) // => 5
    

    vue的方法函数是放在methods对象里

    vue在初始化的时候会遍历methods对象,获取所有的函数,挂载到vue实例上,与数据的初始化基本一致

    但是他会对函数进行一个bind处理,这样会将this的指向锁死成vue实例上

    我们在函数内调用另一个函数通常需要

    this.xxx

    但是再模板里使用并不需要带this

    因为vue模板编译后会转化成

    with(vue实例){
    函数调用()

    }

    也就是说模板早已经自动绑定了this值

    所以在vue模板里我们直接

    <button @click="increment">Up vote</button>
    

    就可以了

    我们也可以在模板内使用函数

    <span :title="toTitleDate(date)">
      {{ formatDate(date) }}
    </span>
    

    在调用函数内如果访问了变量,依然会收集响应的响应式数据,记录哪个vue实例访问了响应的数据

    就像在模板使用的一样,但是注意,函数内不应该改变数据,因为这将会触发下一次渲染

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    慵懒
    前天 07:12
  • 签到天数: 48 天

    [LV.5]常住居民I

    141

    主题

    512

    帖子

    811

    积分

    版主

    Rank: 8Rank: 8

    积分
    811

    猫咪币纪念章三好学生活跃会员热心会员突出贡献中秋纪念章国庆纪念章宣传达人推广达人

    发表于 2022-2-9 19:40:37 | 显示全部楼层
    哥哥好猛  我好爱  
    bilibili:陈公子的话   公众号:陈公子的话
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2022-4-18 01:37
  • 签到天数: 30 天

    [LV.5]常住居民I

    302

    主题

    2582

    帖子

    2650

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2650

    猫咪币纪念章

    发表于 2022-2-9 20:17:42 | 显示全部楼层

    wuwuwu
    完全对抄vue文档
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表