Vue超级api:$data,$props,$el,$options,$options.render,$root

2020-04-08 16:49:25

如果你看到了这篇文章,知道了vue的这些底层api,你会发现你完全可以成为vue大牛了,这写api能帮助我们很好的解决问题,并且我们能通过这些api开发出不错的组件来。

参考地址 Vue基础(一):$data,$props,$el,$options,$options.render,$root


前言:


因为 Vue 的东西相对比较多,所以它的 API 我们完整的过一遍之后,才能真正的知道 Vue 到底有哪些功能。


同时,将来在我们开发的过程当中,你遇到了一个问题,才能一下子就想到,我用 Vue 里面的哪个 API,或者哪一个功能点,能够帮我去解决这个问题。


在学习一个框架之前,一定先把它整个的流程搞清楚、它的原理、它主要去解决了哪些问题、它主要的 API、以及它编程的一些思想。


只有这些东西弄清楚了,真正的用到项目中之后,你才能更得心应手。


不然的话这个框架你一知半解,然后你去使用它的时候,就会发现:我去解决某一个问题的时候,解决起来非常困难,虽然说可以实现,但是我会绕了一个大圈子。


而如果你知道了所有的 API、所有的用法之后,你可能会发现它其实有一个更简单的方法去解决。


这就是我们学习某一项技术必须要打好基础的原因。


 


那么正题开始:


启动项目之后,我们创建一个 Vue 的实例:




 


那么我们通过 new Vue传进去的那个对象是什么呢?


其实就和我们写 .vue 文件的时候, export default 出来的这部分内容差不多。


它也是一个对象,里面这些属性,我们也都可以传进去。并且用法也都是一样的。




 


那么现在有个问题:


如果我们没有传 el: '#app',是不是就没有办法把下面 template 的代码渲染到 html 节点上面呢?


答案是否定的。我们可以通过 $mount('#app') 挂载到 html 节点上。


通过这种方式,和指定 el,它们的效果是一模一样的,如下图:




 


那么我们通过 app = new Vue() 的意义是什么呢?


让我们一步步的往下看。


 


首先,我们先看下 app 上面的 num




我们可以看到,每过一秒,num 就加 1,这个值是动态变化的。


 


app.$data


那么 app.$data 又是什么呢?app.$data 就是我们 new Vue 时传进去的 data。




 


app.$props




我们可以看到,app.$props 的值是 undefined,这是为什么呢?


因为我们根本没有在组件上面去声明这个东西。只有声明,并且传入了之后,它才会有内容。如下图:




 


app.$el


app.$el 就是挂载到 html 上面的节点,它对应的是对这个节点的引用。




 


app.$options


app.$options 对应的其实就是我们在 new Vue() 时传进去的一整个对象。


注意:app.$options 是有一个默认值的,这个默认值和我们传进去的合并之后,就变成了 app.$options




那么在上图的 app.$options 上,我们可以看到 data 这个属性。


那么如果我们通过 app.$options 去修改这个 data,会不会有对应的变化呢?


我们来测试一下:




通过上图,我们可以看到:视图是没有任何变化的。


那么我们可以得出一个结论:我们传入进去 options 里面的 data,其实是通过 Vue 在 init() 的时候,做过了一些修改,而不是直接引用的 $options.data,它们不是同一个对象。所以我们直接修改 $options.data 上面的数据是没有任何作用的。


那么,如果我们直接给 app.$data 上面进行赋值呢?我们来试一下:




我们可以看到是有变化的。这说明了我们挂载在 Vue 实例根对象上的 num 其实跟 $data 上面的 num 是同一个属性。


按照官方的说法:我们直接通过 instance 上面调用 data 上相关的数据,其实就是它代理到 app.$data 上面的属性。


所以这两个属性其实是相通的,那么如果有些特定情况要用到,也可以使用这种方法。


 


app.$options 上面还有一个比较特殊的属性:app.$options.render




我们看到:


刚渲染的时候,0 是没有任何变化的,但是当1秒后 app.num += 1,就更新为 render 方法中的字段了,并且后面不再变化。


说明 render 方法是需要等下一次值变化,重新进行渲染的时候,才会生效。


 


app.$root


那么这个 app.$root 是干嘛用的呢?




我们可以看到上面打印出来的是个对象。根据对象上面的属性,可以说明它是 Vue 的 instance。


那么这个 Vue 的 instance 又是什么呢?


整个 Vue 是以树状结构往下进行渲染的,我们在最上层会有一个根节点,这个根节点就是我们 new 出来的 app。


因为我们是通过 new 出来的这个 app,然后把整个应用挂载到 html 上面的。


所以我们得出一个结论:app.$root === app。


那么 app.$root 的用途是什么呢?在所有的整个 Vue 应用当中,每一个节点上面,我们都可以进行调用。它们拿到的 $root 其实都是同一个值,也就是我们在最外层去生成的,并且通过这个节点去挂载到 html 上面那个 Vue 对象。



  • 2020-01-07 10:14:07

    vue强制刷新组件 销毁和重建

    很多时候,通过重置数据将页面重置时,子组件可以提供重置的方法,或者提供props重置自己的状态。但是相对麻烦,那可以使用强制刷新来实现刷新组件。

  • 2020-01-07 10:17:42

    vue钩子函数beforeRouteUpdate没有反应

    由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 可以访问组件实例 `this`

  • 2020-01-08 13:23:24

    vue 中使用eventbus

    为了提高组件的独立性和重用性,父组件会通过props向下传数据给子组件,当子组件又事情要告诉父组件时用通过$emit事件告诉父组件,如此确保每个组件都是独立在相对隔离的环境中运行,可以大幅度提高组件的可维护性

  • 2020-01-08 13:30:30

    vue中eventbus被多次触发(vue中使用eventbus踩过的坑)

    一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B。 然后我就想,这不就是不同组件之间的数据传递问题而已吗?直接用bus 巴士事件来传递数据不就行了吗。于是,我就很愉快地进行了。关于vue中的eventbus的使用,我之前在一篇vue中的数据传递中有提到过。

  • 2020-01-08 22:03:07

    修改MAC系统下默认PHP版本

    今天在使用mac时遇到了一个问题,因为需要composer拉取laravel5.6,但是提示我php版本过低,但是我本人使用的是集成环境MAMP,已经切换了php7.2的版本,这个为什么没有生效呢?经检查是因为composer检测得是mac下环境变量生效的php版本

  • 2020-01-08 23:37:08

    laravel通过图片流返回图片

    我用laravel的字母头像生成框架Laravolt\Avatar生成的base64头像,但我想做个通用但,直接返回图片,我还是根据以往但经验 改写header但返回值为图片返回值,结果返回失败,一堆乱吗,不知道为啥。 后来用了laravel自带但返回图片但方法,结果ok。记录下

  • 2020-01-08 23:45:06

    laravel response 对象一些常用功能点

    通常,我们并不只是从路由动作简单返回字符串和数组,大多数情况下,都会返回一个完整的 Illuminate\Http\Response 实例或 视图。