vue：css如何使用data中的变量

封装一个ui组件，组件的样式一般是多种多样的

我们可以通过组件传值的方式将ui属性传递给组件，但是我们属性是在js中可以拿到，vue3之前css是无法直接获取的

(vue3中已经可以直接获取，可以去学习一下)  通过vars

那么在vue2中，我们要借助setProperty函数

写一个简单的例子

<template>
    <div class="home" ref="UI">
        <div class="header">hello world</div>
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            color: 'red'
        }
        
    },
    mounted(){
      this.setUI()
    },
    methods:{
        setUI(){
            this.$refs.UI.style.setProperty("--color",this.color);//给变量赋值
        }
    }
}
</script>
<style>
    .home{
 
        .header{
           color: var(--color);  //使用变量
        }
    }
</style>

看到另一种写法

要简单一点，不需要借助setProperty函数

<template>
    <div :style="myStyle">
        <div>hello world</div>
    </div>
</template>
 
<script>
import Vue from 'vue'
export default Vue.extend({
    data () {
        return {
            color: 'red'
        }
        
    },
    computed: {
      myStyle () :object{
        return {
         "--color": this.color,
        }
      }
  },
})
</script>
<style>
    .home{
        .header{
           color: var(--color);  //使用变量
        }
    }
</style>

vue中data变量使用的注意事项

因为在Vue中，data中的属性往往都是用于双向绑定，所以Vue会对其有劫持，所以我们在对data属性进行操作时，尽量不要对其直接操作

比如下面代码：

export default {
	data() {
		return {
			list: []
		}
	},
	methods: {
		init() {
			for(let i = 0; i < 1000; i++) {
				this.list.push({
					key: i,
					name: '张三'
				});
			}
			console.log(this.list);
		}
	},
	created() {
		this.init();
	}
}

最终打印结果如下：

可以看到包含一个Observer属性，这是Vue自动加上的。

上面代码不断向this.list中添加数据，这样会造成过度数据劫持，造成逻辑处理速度极慢（取值同样如此），可能我们在平时的代码上感受不到，如果将一个比较复杂的canvas渲染动画放进去，全部使用this属性就会发现canvas渲染非常卡顿。

所以我们将init中代码改成：

const list = [];
for(let i = 0; i < 1000; i++) {
  list.push({
    key: i,
    name: '张三'
  });
}
this.list = list;