Vue 计算的属性函数永远不会被调用

Question

我正在尝试自己做 Google Science Journal，但是使用 MQTT 协议的网络版本，但我的代码有很多错误。

关于我的代码的一些说明：

google.charts.load 正在调用 parent 组件，然后回调调用 child 组件
time props是一个区间，每秒在true和false之间变化，收集数据。
我需要观察具有多个依赖项的数据的变化。

我的代码如何工作？

创建新实例时，出现空google图表
图表开始每秒显示一次数据。
选择新选项卡并删除图表数据时，图表的标题会发生变化。

这段代码有一个问题，是调用函数的顺序（使用 google 图表会产生一些问题），但我修复了它，将函数从计算移到方法并按顺序调用。

我只是想知道为什么这个计算函数不起作用，我的意思是，它们不是永远不会调用。

<template>
    <v-card>
        <v-tabs
        v-model="active_tab"
        background-color="red lighten-2"
        dark
        show-arrows
        >
            <v-tab
            v-for="(n) in tabs"
            :key="n.id"
            >
                {{n.text}}
                <v-icon>{{n.icon}}</v-icon>
            </v-tab>
        </v-tabs>
        <div ref="char_div"></div>
    </v-card>
</template>

<script>
import debounce from 'debounce'

export default {
    name: 'charts',
    props:{
        time: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            chart: null,
            options: null,
            value: 0,
            previus: null,
            data: null,
            tabs: [
                {id: 0, text: "Aceleración lineal", unit: "(m/s&sup2;)", icon: ""},
                {id: 1, text: "Aceleración en x", unit: "(m/s&sup2;)", icon: ""},
                {id: 2, text: "Aceleración en y", unit: "(m/s&sup2;)", icon: ""},
                {id: 3, text: "Aceleración en z", unit: "(m/s&sup2;)", icon: ""},
                {id: 4, text: "Velocidad lineal", unit: "(m/s)", icon: ""},
                {id: 5, text: "Luz ambiental", unit: "(lux)", icon: ""},
                {id: 6, text: "Intensidad sonora", unit: "(dB)", icon: ""},
                {id: 7, text: "Tono", unit: "(Hz)", icon: ""},
                {id: 8, text: "Barómetro", unit: "(hPa)", icon: ""},
                {id: 9, text: "Brujula", unit: "grados", icon: ""},
                {id: 10, text: "Magnetómetro", unit: "&micro;T", icon: ""},
                {id: 11, text: "Humedad", unit: "%", icon: ""},
                {id: 12, text: "Temperatura ambiente", unit: "&deg;C", icon: ""}
            ],
            active_tab: 0
        }
    },
    computed: {
        newData: function(){
            switch (this.active_tab) {
                case 0:
                    this.value = Math.sqrt(this.$state.lin_acel.x^2 + this.$state.lin_acel.y^2 + this.$state.lin_acel.z^2)
                    break
                case 1:
                    this.value = this.$state.lin_acel.x
                    break
                case 2:
                    this.value = this.$state.lin_acel.y
                    break
                case 3:
                    this.value = this.$state.lin_acel.z
                    break
                case 4:
                    if (this.previus != null){
                        //var cons = Math.sqrt(this.$state.lin_acel.x^2 + this.$state.lin_acel.y^2 + this.$state.lin_acel.z^2)
                        var ax = this.$state.lin_acel.x,
                            ay = this.$state.lin_acel.y,
                            az = this.$state.lin_acel.z

                        var nuevo = Date.now()

                        var vx = ax * ((nuevo - this.previus)/1000),
                            vy = ay * ((nuevo - this.previus)/1000),
                            vz = az * ((nuevo - this.previus)/1000)

                        //this.value += (cons)*((nuevo - this.previus)/1000)
                        this.value += Math.sqrt(vx^2 + vy^2 + vz^2)
                        this.previus = nuevo
                    }else{
                        this.value = Math.sqrt(this.$state.lin_acel.x^2 + this.$state.lin_acel.y^2 + this.$state.lin_acel.z^2)
                        this.previus = Date.now()
                    }
                case 5:
                    this.value = this.$state.lux
                    break
                case 6:
                    this.value = this.$state.noise
                    break
                case 7:
                    this.value = this.$state.noise
                    break
                case 8:
                    this.value = this.$state.presion
                    break
                case 9:
                    var vector = Math.sqrt(this.$state.magneto.x^2 + this.$state.magneto.y^2 + this.$state.magneto.z^2)
                    break
                case 10:
                    this.value = Math.sqrt(this.$state.magneto.x^2 + this.$state.magneto.y^2 + this.$state.magneto.z^2)
                    break
                default:
                    this.value = 0
                    break
            }
        },
        newOptions(){
            console.log("new options")
            this.options = {
                tittle: this.tabs[this.active_tab].text,
                crosshair: {orientation: 'vertical', trigger: 'both'},
                legend: 'none',
                hAxis: {
                    format:'mm:ss'
                    }
            }
        },
        drawchart(){
            console.log("chart is drawing")
            this.chart.draw(this.data, google.charts.Line.convertOptions(this.options));
        },
    },
    watch: {
        time: {
            immediate: false,
            handler(){
                this.addData()
            }
        },
        active_tab: {
            inmediate: false,
            handler(){
                this.updatetable()
            }
        }
    },
    methods: {
        addData(){
            this.data.addRows([[new Date(Date.now()),0]])
        },
        updatetable(){
            this.data = null
            this.data = new google.visualization.DataTable(
                {cols:
                    [{label: 'tiempo', id: 'x', type: 'date'},
                    {label: String(this.tabs[this.active_tab].text), id: 'y', type: 'number'}]})
        }
    },
    mounted() {
        this.chart = new google.charts.Line(this.$refs.char_div)
        this.newOptions
        this.updatetable()
        this.drawchart
    }
}
</script>

<style>

</style>

Answer 1

正如所说，“计算的属性函数并不意味着改变任何 data 属性，而是应该 return 一个值”。是因为computed watches只在return变化，例如：

//Computed watch this
return this.a + this.b
//{...}
//Not this
this.c = this.a + this.b

我在这里和 Vue 论坛中找到了改进此代码的方法：如果你需要看一个有多个依赖的数据，你可以这样做：

computed: {
    multi(){
        return [this.a, this.b].join()
    }
},
watch: {
    multi: {
        handler(): {
            this.c = this.a + this.b
        }
    }
}

我认为我能找到的最好的解决方案是：

created(){
    this.$watch(
        (this) => (vm.x, vm.y, vm.z, Date.now()),
        function () {
            // Executes if `x`, `y`, or `z` have changed.
        }
    )
}

这最后也是 return 函数 unwatch()，它停止观察者属性，如果我这样做 this.watcher = this.$watch(/*data and callback here*/)，那么我可以 this.watcher() 停止watcher 并制作新的，非常适合提高此代码的性能。

Vue 计算的属性函数永远不会被调用

Vue computed property functions are never called

google-visualization

vue.js

vuex

Vue 计算的 属性 函数永远不会被调用

Vue computed property functions are never called

google-visualization

vue.js

vuex

Vue 计算的属性函数永远不会被调用