Vue实例对象中常见$开头属性与方法概览

一、 vue常见实例化方式

1. new Vue
   直接调用new方法创建实例
2. class Page extends Vue
   类的方式准备一个vue对象，使用<Page />创建实例
3. {name: 'aInput', data:..., render:...}
   对象组件的方式准备一个类vue对象component，使用new Vue(component)或者使用Vue.component(component.name, component)之后使用<a-input />创建实例

二、$开头属性和方法

1. $data

   • 代理data里面的非'_'和'$'开头的属性

           export default {
               data: () => {
                  return {
                    a:'',
                    b:'',
                    c:''，
                   };
                },
            };
   

   • vue实例后需要通过this.$data.a来获取a的值，this.a或者this.data.a都会返回undefined

            class parentPage extends Vue {
                private a: string = '';
                private b;
                private c = undefined;
             };
   

   • 如上图使用类的方式来定义data,必须为属性赋初始值（非undefined）才能被$data代理。对于非响应变量b,c来说，推荐命名为_b,_c

2. $props

   • 代理当前组件接收到的 props 对象

     {
       name: 'aInput',
       data: () => {
          return {
          };
       },
       props: {
         a
         b
       },
    };
   
     <a-input 
       a='1'
       b='2'
       c='3'
     />
   
   

   • 如上图：this.$props={a:1,b:2}

3. $attrs

   • 包含了父作用域中不被 prop 识别的特性绑定 (class 和 style 除外)

     {
       name: 'aInput',
       data: () => {
          return {
          };
       },
       props: {
         a
         b
       },
    };
   
     <a-input 
       a='1'
       b='2'
       c='3'
     />
   
   

   • 如上图: 由于props定义了a和b属性，没有申明c属性。则此时的c属性将会被this.$attrs代理。this.$attrs={c:'3'}
   • vue对象的inheritAttrs属性值默认为true（可设置和true/false，为true时它会将$attrs的值以attr的形式渲染到dom节点上

4. $listeners

   • 代理了父组件传过来的事件（不含 .native 修饰器的v-on或者onXXX的方式传递过来的函数）

     {
       name: 'aInput',
       data: () => {
          return {
          };
       },
       props: {
         a
         b
       },
    };
   
     <a-input 
       a='1'
       onChange={()=>{}}
       onBlur={()=>{}}
     />
   
   

   • this.$listeners = {change: ()=>{}, blur: ()=>{}}
   • 子页面使用this.$emit('change',()=>{})派发父页面onChange事件,详情参考$emit

5. $on、$emit、$off、$once

   • 以上方法最常用于事件车（eventBus）做组件间的联动
   • $on用来注册一个事件
   • $emit用来触发$on注册的事件，也可以用来触发$listeners代理的事件
   • $off用来关闭$on注册的事件。常用于组件销毁时使用
   • $once用来注册一个一次性事件。$emit派发事件后，此事件会自动销毁，无法再次被派发。不需要$off来手动关闭

         //eventBus
         const eventBus = new Vue();          
   
         //父组件
          class parentPage extends Vue {
               mounted() {
                 bus.$on('callFather', () => {
                   console,log('儿子叫我了')
                 })
                 bus.$once('transmitMessage', (message) => {
                   console,log('儿子告诉我妈妈的钱藏在哪里'，message)
                 })
               }
               render() {
                   return (
                       <ChildPage  
                          onTestListeners=()=>{console.log('儿子使用了$emit')} 
                       />
                   )
               }
          }
         
         //儿子组件
         class ChildPage extends Vue {
               mounted() {
                 //呼叫老爸
                 bus.$emit('callFather')
                 //传递信息后被打死了，不需要off
                 bus.$emit('transmitMessage', '妈妈的钱藏在床底下')
   
                 //不要忘了派发我
                 this.$emit('testListeners')
               }
               beforeDestroy() {
                 //组件销毁前需要此页面独用的事件
                 bus.$off('callFather')
                 //因为事件是注册在了eventBus里面，如果注册的事件一直不销毁，则eventBus就会越来越大，而且也会出现多个页面注册同一个事件的情况，代码就不可跟踪了
               }
               
          }
   

6. $refs

   • $refs可以用来获取dom节点，进行一些dom的操作
   • $refs可以用来获取组件对象（Vue实例）
   • $refs在for循环中可以配合refInFor={true}来以数组形式获取多个组件对象

         {
             render:(h: CreateElement) {
                 return (
                   <div ref='divRef'>
                     {
                       [1,2].map(()=>{
                           return <input ref='inputRef'  refInFor={true}   />
                       })
                     }              
                   </div>
               )
             }
         }
   

   • this.$refs = {divRef: HTMLDivElement, inputRef: [HTMLInputElement, HTMLInputElement]}

7. $nextTick

   • 回调延迟到下次 DOM 更新循环之后执行。
   • 使用场景举例
     • 在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象。（不要问我为什么不在mounted里面取dom对象）
     • 在一个ajax请求的回调里使用this.$nextTick()可以等待render重新渲染后再来获取dom对象来做一些比如合并table单元格、滚动条滚到指定位置等dom操作

     created() {
          this.$nextTick(() => {
               //this.$refs.input
          });
          Ajax(options,(data) => {
              this.data = data;
              this.$nextTick(() => {
                 //this.$refs.input
              });
          })
     }
   

8. $forceUpdate

   • 强制重新执行render方法
   • 使用场景举例
     • 非响应式的值改变，又需要刷新DOM，可使用此方法

     created() {
          Ajax(options,(data) => {
              this._data = data; //非响应式数据更新
              this.$nextTick(() => {
                 //this.$refs.input
              });
              //强制刷新当前组件的render
              this.$forceUpdate();
          })
     }
   

三、更多

可以通过打印Vue对象查看它的所有属性和方法，后续再慢慢补吧