js 传参到 vue + 计算属性使用-526互联

场景

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