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作用域的功能。

     

  • 相关阅读:
    jmeter中生成不重复的序列
    jmeter返回解密
    jmeter请求加密
    查看链接设备和安装软件
    jmeter_事物控制器_Transaction Controller
    jmeter返回中提取匹配多个参数($1$$2$)
    jmeter官方文档地址
    DEDECMS会员注册如何配置邮箱发送邮件功能
    颤抖吧,Css3
    html embed用法
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14665132.html
Copyright © 2011-2022 走看看