vue如何遍历data所有变量并赋值

答案如下：

1. 遍历data属性并赋值

在Vue中，可以使用Object.keys()方法获取对象的所有属性名，再通过遍历数组的方式对所有属性进行操作。

// 获取data所有属性名
const dataKeys = Object.keys(this.$data);

// 遍历data所有属性并赋值
dataKeys.forEach(key => {
  if (typeof this[key] !== 'undefined') {
    this[key] = this.$data[key];
  }
})

以上代码中，我们首先通过Object.keys()方法获取了当前组件实例（this）的$data属性的所有属性名，然后通过forEach()方法遍历所有属性并进行赋值。

注意： 在对属性进行赋值时，需要用this.$data[key]来获取对应属性的值，而不能使用this[key]，否则会导致死循环。

2. 在模板中遍历data属性并渲染

Vue提供了一个v-for指令，可以用来在模板中遍历数组或对象并渲染相应的元素。

<template>
  <div>
    <ul>
      <li v-for="(value, key) of $data" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </div>
</template>

以上代码中，我们使用v-for指令遍历了$data属性，并将每个属性的键名和键值渲染到了页面中。

总结：

本文提供了两种遍历data属性的方法：通过JavaScript代码遍历并赋值，或通过Vue模板中的v-for指令渲染。以上两种方法都有其各自的优缺点，具体使用要根据实际场景进行选择。