zoukankan      html  css  js  c++  java
  • 13.每个vue文件都是一个私有作用域/css的私有性原理

    每个vue组件是一个私有的作用域(script标签包裹的都是)如下测试:

    父组件:

     子组件:

     结果:我们发现只有定义在vue原型上的,才能拿到,因为this就是vue的实例,实例当然可以访问原型上的方法啦,但是虽然父组件引入了子组件,但是却不能使用子组件中的变量。

    我们发现vue-runtime-esm.js也就是:

     说明在预编译单文件组件的时候,就没找到父组件中打印的这个变量,说明每一个单文件组件作用域都是独立的。

     正是利用私有作用域的特性,我们可以把一些当前组件中一些静态数据,不需要变动的,放在export default外边,与其平级的script标签中,因为如果放在data中时,就会触发数据劫持,消耗不必要的性能。


     css私有原理:

     

    添加scoped属性后

    可以清楚看到,添加scoped后,vue-loader加载器会做两个处理:

    1、给html标签添加data-v-hash属性
    2、给css样式添加[data-v-hash]选择器

    这样一来,css样式就只对带有相应data-v-hash的标签起作用了,也就变现实现了css作用域的功能。

     

  • 相关阅读:
    socket 编程
    空间配置器
    线程
    Linux系统编程——进程替换:exec 函数族
    linux粘着位
    exit函数与_exit
    [smart210] 定时器与PWM
    [smart210] s5pv210的中断体系
    [smart210] Nand Flash K9F4G08U0B 的配置与读写控制(二)
    [smart210] Nand Flash K9F4G08U0B 的配置与读写控制(一)
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14665132.html
Copyright © 2011-2022 走看看