Vue 加载和渲染良好，但随后停止工作答案

【问题标题】：Vue loads and renders well, but then stops workingVue 加载和渲染良好，但随后停止工作
【发布时间】：2018-06-06 16:02:07
【问题描述】：

我有一个使用 Vue 和 Webpack 的应用程序。我从 webpack 文档中得到了这个配置：

webpack.common.js

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'src/app.js')
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Production',
      template: 'src/index.html'
    })
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
};

webpack.dev.js

const merge = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    }
})

在前面我有一些使用 webpack-dev-server 开发时运行的 Vue 代码。

当我使用该配置运行它时，页面加载了插入的参数和渲染的指令（即 v-for）并且所有停止工作（setInterval 除外），ui 没有更新，事件不会触发处理程序，什么都没有。

index.html

<div id="app" class="container">
        <div class="row">
            <div class="col">
                <div class="jumbotron">
                    <h1 class="display-4">Title</h1>
                    <p class="lead">
                        Lorem ipsum faciebat <i><b>'{{randomWord}}'</b></i>?
                    </p>
                </div>
            </div>
        </div>
</div>

app.js

import Vue from 'vue';
import {mockedData} from './mocked-data';
import './components/search-bar';
import './components/word-cta';

var app = new Vue({
    el: "#app",
    data: function(){
        const words = ["foo", "bar", "baz", "faz", "boo", "foz", "bor"]
        let i = 0
        const getRandomWord = function(){
            if(i == words.length - 1){
                i = 0
            } else {
                i += 1
            }

            return words[i]
        }

        const data = {
            randomWord: words[0],
            lastWords: mockedData,
            result: ""
        }

        setInterval(function(){
            data.randomWord = getRandomWord()
        }, 1700)

        return data
    },
    methods: {
        onSearch: function(result){
            this.result = result;
        }
    }
})

我不知道发生了什么...控制台没有帮助。下面是输出：

vue.esm.js:8439 下载 Vue Devtools 扩展以获得更好的开发经验：https://github.com/vuejs/vue-devtools vue.esm.js:8449 您正在开发模式下运行 Vue。确保部署生产时打开生产模式。查看更多提示在https://vuejs.org/guide/deployment.html

编辑：

我刚刚意识到问题是使用webpack导入Vue。如果我删除import Vue from 'vue'; 我在 .js 文件中的行并放入

<script src="https://unpkg.com/vue"></script>

在我的 index.html 上，问题已解决，JS 的行为符合预期。

谁能解释一下原因？

【问题讨论】：

您检查浏览器控制台是否有错误？确保您也使用 Vue.js 的开发版本，以确保更容易跟踪错误。之后您可以切换回生产版本。
我刚刚添加了控制台的输出。我认为没有什么相关的
仔细观察，我建议您从 data 属性中删除一些逻辑。具体来说，像setInterval 调用应该在mounted 生命周期钩子中执行。作为一般经验法则，您应该将data 视为静态声明，而您应该将mounted 用于任何运行时数据声明。这是否会解决您的问题，我不能说，但它仍然有助于提高您的代码质量。
阅读文档，我认为我不能确保使用挂载的钩子以 1700 毫秒的间隔运行函数。如果我错了，请纠正我
将setInterval的返回值存储在数据字段中。然后可以根据需要稍后参考该间隔。此外，在进入setInterval 调用之前执行var this_vue_instance = this; 之类的操作，以便您可以通过this_vue_instance.randomWord = . . .; 或通过this_vue_instance.setRandomWord(); 的方法调用更新您的randomWord 值。

标签： javascript node.js webpack vuejs2

【解决方案1】：

我的假设是你在你的 webpack 配置文件中错过了 babel-loader，所以 webpack 无法识别“import”语法，而且你应该将 'vue/dist/vue.esm.js' 更改为 'vue/dist /vue.common.js'。

【讨论】：