js 传参到 vue + 计算属性使用

场景

• js 中存储 xAxisData = [......]、yAxisData = [......]，想在 vue 中使用，但要求使用前转化成 data 存有若干个 (x, y) 的形式
• 在改变 xAxisData 或 yAxisData 的任意一值时，都会反馈更新到 vue 的每一个调用了 data 的地方

方法一：js 中

Cannot read properties of undefined (reading 'xAxisData')

• 错误的编写：

  // 定义方法
  function queryEchartsData(xAxisData, yAxisData) {
      let data = [];
      for(let i= 0; i < xAxisData.length; i++){
          let nodeData = [];
          nodeData.push(xAxisData[i]);
          nodeData.push(yAxisData[i]);
          data.push(nodeData);
      }
      return data;
  }
  
  export const schema = {
  	xAxisData:[......],
      yAxisData:[......],
      // 以下的写法是错误的
      data:queryEchartsData(this.xAxisData, this.yAxisData),
  }
  

  • 报错：Cannot read properties of undefined (reading 'xAxisData')
  • this 在 data：queryEchartsData(this.xAxisData, this.yAxisData) 这一行实际上是指向外层的上下文，而不是紧跟着的 schema 里的 xAxisData

改写优化：

// 定义方法
function queryEchartsData(xAxisData, yAxisData) {
    let data = [];
    for(let i= 0; i < xAxisData.length; i++){
        let nodeData = [];
        nodeData.push(xAxisData[i]);
        nodeData.push(yAxisData[i]);
        data.push(nodeData);
    }
    return data;
}
const xAxisData = [......];
const yAxisData = [......];

export const schema = {
	xAxisData:xAxisData,
    yAxisData:yAxisData,
    data: queryEchartsData(xAxisData, yAxisData)
}

方法二：vue 中

功能不符合要求

• js 只传 xAxisData = [......]、yAxisData = [......] 转为 data 形式由 vue 来做

• 错误的编写：

  <script lang="js">
      export default {
          watch(){
              xAxisData: {
                  deep:true,
                  immediate:true,
                  handler(val){
                  	this.refreshEcharts(); // nextTick(() => {	this.init();	})
                  }
              },
              yAxisData: {
                  deep:true,
                  immediate:true,
                  handler(val){
                      this.refreshEcharts();
                  }
              },
          }
          data() {
              const data = this.queryEchartsData()
              return {
                  data
              };
          },
          methods: {
              queryEchartsData() {
                  this.test
                  let data = [];
                  for(let i= 0; i < this.xAxisData.length; i++){
                      let nodeData = [];
                      nodeData.push(this.xAxisData[i]);
                      nodeData.push(this.yAxisData[i]);
                      data.push(nodeData);
                  }
                  return data;
              },
              init() {
                  // ......
                  data: this.data,
                  xxx: this.data[0],
                  yyy: this.data.length,
                  // ......
              }
          }
  </script>
  

  • deep: true 表示深度监听，即在对象内部的属性发生变化时也触发回调
  • immediate: true 表示在初始时就执行一次 handler，即在组件创建之初就会执行一次
  • handler(val) 是回调函数，当 xAxisData、yAxisData 发生变化时，这个函数会被调用
    • 这里就是进行了图形的重新渲染
  • 注意，这里只是完成了第一次的渲染，之后的 data 不会跟着更新变化

利用计算属性

• 利用计算属性结合了：获取 data 方法和监听

    computed: {
      queryEchartsData() {
        let data = [];
        for(let i= 0; i < this.xAxisData.length; i++){
          let nodeData = [];
          nodeData.push(this.xAxisData[i]);
          nodeData.push(this.yAxisData[i]);
          data.push(nodeData);
        }
        return data;
      }
    },
  

  • 这样的话，使用时：

    data: this.queryEchartsData,
    this.queryEchartsData[0],
    this.queryEchartsData.length,
    

  • 即可

• 这时的 this.queryEchartsData 就已经是更新后的 data 了

• 计算属性会在其依赖的数据发生变化时自动重新计算

  • 会自动处理依赖关系，无需手动设置 watch