vuejs / vue-hot-reload-api Goto Github PK
View Code? Open in Web Editor NEW🌶️ Hot reload API for Vue components
License: MIT License
🌶️ Hot reload API for Vue components
License: MIT License
I have tried the browserify and the webpack templates using vue-cli. In both cases, the state is preserved during HMR when I change the template portion, but not when I change the script portion of the *.vue
file.
To reproduce:
src/components/Hello.vue
of the vue-cli created example:<template>
<div id="hello">
<h1>{{ count }}</h1>
<button v-on:click='inc'>inc</button>
<button v-on:click='count -= 1'>dec</button>
</div>
</template>
<script>
export default {
name: 'hello',
data () { return { count: 1 } },
methods: { inc: function() { this.count += 1} }
}
</script>
npm run dev
count -= 1
to count -= 2
in the template part
count += 1
to count += 2
in the script part
Tested on: Chrome & Firefox on macOS & Windows
An example project using Vue.js 1.0 and the associated vueify+template I've created a few weeks ago preserves the state in both cases.
@yyx990803 Please, look at
vuejs/vue-loader#461
for details
I think it should actually do a full reload when it's required, not just reporting a need because it's really simple to miss the report among other HMR/app's messages. If making it a default behaviour is too much, an option would suffice.
vue-hot-reload-api/src/index.js
Lines 122 to 125 in 45936fb
vue-hot-reload-api/src/index.js
Lines 246 to 248 in 45936fb
To anyone who also think so, you can use this snippet until the option is introduce or the default behaviour is changed:
// webpack.config.js
const VueReload = require('../plugins/vue-reload')
module.exports = {
plugins: [new VueReload()]
}
// vue-reload.js
module.exports = class VueReloadPlugin {
apply(compiler) {
compiler.hooks.compilation.tap('VueReloadPlugin', compilation => {
compilation.hooks.processAssets.tap({ name: 'VueReloadPlugin', stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS }, () => {
const patched = []
for (const chunk of compilation.chunks) {
const anyVueModules = chunk.getModules().some((module) => /\.vue/.test(module.resource))
if (!anyVueModules) {
continue
}
for (const file of chunk.files) {
const isJSFile = /\.js/.test(file)
if (!isJSFile) {
continue
}
compilation.updateAsset(file, (input) => {
// the \\n part is necessary in case the source code is turned into an eval string
const re = /(console\.warn\([\s\\n]*['"](?:Something went wrong during Vue component hot-reload.|Root or manually mounted instance modified.) Full reload required.['"][\s\\n]*\))/g
const matches = Array.from(input.source().matchAll(re))
if (matches.length === 0) {
return input
}
const output = new ReplaceSource(input)
for (const match of matches) {
const position = match.index + match[1].length
output.insert(position, ';window.location.reload();')
}
patched.push(file)
return output
})
}
}
if (patched.length !== 0) {
console.info('vue-reload-plugin: patched', patched.join(', '))
}
})
})
}
}
[email protected] / [email protected] 同时使用 script 标签引入时候,发现报错
而报错 vue.js 来源于 node_modules,请问外链引入的 Vue 对象为何错误发生在 node_modules 上的?
实验1 换为同时 import vue & vuex 则没有出现这样的错误
实验2 换为旧版本 vue-hot-reload-api 也没有出现这样的错误,但热加载不了
实验3 禁止 webpack 热加载,同时外链,也没有出现这样的错误
This repo is missing tags corresponding to npmjs.com releases. Please add them. We like to take github tarballs for creating debian packages (to include tests and also sometimes to use the real/non-transpiled/non-minified source).
Hi, with use a last webpack & vue, after yarn command, vue-hot-reload-api will break code execution in attempt to get Vue version:
If I use an old node_modules codebase — all works fine. What is wrong?
In debugger you can see what Vue version was inside vue.default
:
My package.json
{
"name": "trol-front",
"version": "0.1.0",
"description": "",
"main": "client/index.js",
"scripts": {
"start": "node start.js",
"api": "cd json && json-server --watch db.json --port 8008 --routes routes.json",
"dev": "node build/server.js",
"build": "webpack --config build/webpack.prod.js",
"dev:menu": "node build/server.js MENU",
"build:menu": "NODE_ENV=production webpack --config build/webpack.prod.menu.js",
"menu": "cd dist-menu && python -m SimpleHTTPServer 4000 && echo 'http://localhost:4000/'",
"lint": "eslint client/* --ext .js --ext .vue",
"test": "echo lol"
},
"author": "",
"license": "MIT",
"dependencies": {
"axios": "^0.15.3",
"babel-polyfill": "^6.23.0",
"vue": "^2.2.1",
"vue-router": "^2.0.0",
"vue-template-compiler": "^2.2.1",
"vuex": "^2.0.0"
},
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.16.0",
"babel-helper-vue-jsx-merge-props": "^2.0.1",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-jsx": "^6.13.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-vue-jsx": "^3.1.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-stage-2": "^6.13.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^2.0.0",
"css-loader": "^0.23.1",
"css-mqpacker": "^5.0.1",
"es6-promise": "^4.0.5",
"eslint": "^3.6.0",
"eslint-config-vue": "latest",
"express": "^4.14.0",
"extract-text-webpack-plugin": "2.0.0-beta.3",
"file-loader": "^0.9.0",
"fs-extra": "^0.30.0",
"html-webpack-plugin": "^2.22.0",
"http-proxy-middleware": "^0.17.3",
"json-server": "^0.9.4",
"lodash": "^4.17.4",
"moment": "^2.17.1",
"node-sass": "^4.0.0",
"postcss-loader": "^1.2.0",
"progress-bar-webpack-plugin": "^1.9.0",
"sass-loader": "^4.0.2",
"static-loader": "^0.1.8",
"style-loader": "^0.13.1",
"vue-loader": "^10.0.2",
"webpack": "2.1.0-beta.22",
"webpack-dev-middleware": "^1.8.1",
"webpack-hot-middleware": "^2.12.2"
}
}
I've updated my project dependencies and now I'm getting this error from vue-hot-reload-api:
Uncaught TypeError: Cannot read property '_lifecycleHooks' of undefined
at Object.exports.install (eval at ./node_modules/vue-hot-reload-api/index.js (app.js:1381), <anonymous>:15:17)
at eval (eval at ./src/App.vue (app.js:1473), <anonymous>:18:10)
at eval (eval at ./src/App.vue (app.js:1473), <anonymous>:26:3)
at Object../src/App.vue (app.js:1473)
at __webpack_require__ (app.js:660)
at fn (app.js:84)
at eval (eval at ./src/main.js (app.js:1489), <anonymous>:3:67)
at Object../src/main.js (app.js:1489)
at __webpack_require__ (app.js:660)
at fn (app.js:84)
App.vue has just this content:
<template></template>
main.js has just this content (the Vue instance isn't even being mounted):
import Vue from 'vue'
import App from './App.vue'
I'm using webpack-dev-server and the error only happens when devServer.hot
is true and the plugin webpack.HotModuleReplacementPlugin
is used.
After update to Vue 2.6.7 I get the following error when hot reloading a component with scoped slots.
TypeError: Cannot create property 'items' on boolean 'true'
at resolveScopedSlots (vue.runtime.esm.js?2b0e:2890)
I traced it back to https://github.com/vuejs/vue-hot-reload-api/blob/master/src/index.js#L259 which passes res=true to the resolveScopedSlots
function:
This works fine on Vue 2.6.6.
hi, i installed vueify and i saw this package installed.
How to use it ?
regards
Hi,
thanks for your work on hot reload!
I'm using vue-hot-reload-api implicitly with webpack dev server and vue-loader. When introducing vue-router into the mix and declaring a beforeRequestEnter hook, hot reloading does not work.
Hot reloading should reload data set by vue-routers beforeRequestEnter hook as well.
The beforeRequestEnter hook is executed, but the data set on the instance is not reloaded.
Clone https://github.com/stoically/vue-router-hot-reload-issue (based on vue init webpack-simple
)
npm install
npm run dev
Navigate to http://localhost:8080
You'll see Message from VueRouter: beforeRouteEnter
Now make a change in the src/Router.vue
file
Message changes to Message from VueRouter: data
I'm actually not sure if this is expected behaviour. But if it is I would appreciate any pointers on how to achieve hot reloading in this case manually.
Best regards
同类型vue组件顺序修改,$children中vueComponent顺序发生修改
不同类型vue组件顺序修改时,$children中vueComponent顺序不发生修改
虽然vue文档中明确指出$children不保证顺序
但是还是希望能统一对于$children产生的效果
巨人稍稍动动手指 肩膀上的普通人将感激涕零
npm ERR! Linux 4.4.0-36-generic
npm ERR! argv "/data/settings/.config/fnm/bin/node" "/home/ed8/.config/fnm/bin/npm" "install"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants vue-hot-reload-api@^1.2.0
Only devDependencies
{
"vue": "^1.0.26",
"vue-hot-reload-api": "^2.0.6",
"vue-html-loader": "^1.2.3",
"vue-i18n": "^4.5.0",
"vue-loader": "^8.5.2",
"vue-router": "^0.7.13",
"vue-style-loader": "^1.0.0",
"vuex": "^1.0.0-rc.2",
}
Hi everyone, I'm having an issue with rerender
.
In the readme.md
file, you provided a sample component options.
const myComponentOptions = {
data () { ... },
created () { ... },
render () { ... }
}
However, my object does not have a render
function. It's using a template
, instead. Here's a sample:
const componentOptions = {
data() { return { foo: 'bar' }; },
template: '<div>foo value is: {{ foo }}</div>'
};
When I try to rerender
it, an exception occurs because the render
function is missing.
The reload
method is working perfectly fine though.
Here's a repro:
https://github.com/BrightSoul/vue-hot-reload-api-issue-repro
I am aware that an easy solution to this is to just rewrite my component options like this:
const componentOptions = {
data() { return { foo: 'bar' }; },
...Vue.compile('<div>foo value is: {{ foo }}</div>')
};
But I was wondering whether the difference in behavior between reload
and rerender
is intended or not.
This happens every time to me when component is reloaded:
TypeError: Cannot read property 'extend' of undefined
at VM93425 main.js:28952
at Object.reload (VM93425 main.js:28860)
at VM93425 main.js:43826
at Object../src/agilecards/components/edit-settings/TemplateScopeSelector.vue (VM93425 main.js:43831)
at __webpack_require__ (VM93425 main.js:679)
at hotApply (VM93425 main.js:608)
at VM93425 main.js:290
at <anonymous>
Stack trace is not very helpful, but I tracked this exception to line 196:
const newCtor = record.Ctor.super.extend(options)
Looks like super
does not exist in Ctor
(and Ctor
is the Vue constructor function). I'm using Vue 2.5.2.
Hello,
I was reading the Usage
section of the README.md
file and one line lack a comment :
if (!module.hot.data) {
I have no ideea what this line does. I checked the WebPack HMR API doc and found one occurence of this property (https://webpack-v3.jsx.app/api/hot-module-replacement/):
This object will be available at module.hot.data after the update.
But it doesn't explain what's its purpose and what checking its existence implies.
Adding a comment to this line may help futur reader.
Hey I recently posted an issue on vue-router about not being able to properly hot reload vue components with Vanilla JS (at the time I thought it was vue-router).
I have a demo repo here that demonstrates the problem but I will quickly explain it here also.
Basically I am using Vue without .vue
files this is simply because I find my workflow (syntax highlighting, how I structure my SASS, etc...) works better using Vanilla JS files. I am requiring .html
files using the webpack html-loader as the component template like so:
export default {
name: 'Home',
// ...
template: require('./Home.html')
}
<!-- Home.html -->
<div>
<p>
<router-link to="/test-one">Test One</router-link>
</p>
<p>
<router-link to="/test-two">Test Two</router-link>
</p>
</div>
Is there a way I can set up the vue-hot-reload-api to work with this?
When using the plugin in SSR application there is window is not defined
issue at index.js:3
.
What about fixing it with changing this:
var map = window.__VUE_HOT_MAP__ = Object.create(null)
to:
var map = (typeof window !== 'undefined'
? (window.__VUE_HOT_MAP__ = Object.create(null))
: Object.create(null))
Then, Server-Side Rendering would be work fine.
P.S. @yyx990803, if you prefer, I could submit PL for that.
I have a 'child' component that extends a 'base' component, using the property 'extends'.
However, when I edit the HTML or change the data of the base component and save the file, the child component gets overwritten completely with the contents of the base component by the hot reload, and there's no way to get the child back other than hard reloading the page.
Is this a known issue or a bug?
/Users/cmseguin/dev/git/home-controller/node_modules/vue-hot-reload-api/dist/index.js:3
var map = (window.__VUE_HOT_MAP__ = Object.create(null))
^
ReferenceError: window is not defined
at Object.<anonymous> (/Users/cmseguin/dev/git/home-controller/node_modules/vue-hot-reload-api/dist/index.js:3:35)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at $serverRequire (/Users/cmseguin/dev/git/home-controller/dist/server.js:2198:22)
at $getRef (/Users/cmseguin/dev/git/home-controller/dist/server.js:2230:20)
I believe a simple check on the window should fix that issue
Hi, I'm trying to add hot reload capability to my Vue 2.5 project with Typescript. I'm using Vue.extend()
to define new components and they're not ComponentOptions
type any more, and so the Usage documentation with the ComponentOptions
instances seems to not apply any more. Is it possible to enable hot reload for components defined with Vue.extend()
?
test.vue
<template functional>
<div>example</div>
</template>
main.js
import test from 'test.vue'
Vue.component('test', test)
App.vue
<template>
<div>
<test />
</div>
</template>
If i changing test.vue
file - hot reload won't works.
As i can see this is because Vue.component
creates new options object, but hot reload stores original component object
if i adds something like this:
function makeOptionsHot(id, options) {
if (options.functional) {
var render = options.render
options.render = function (h, ctx) {
+ var record = map[id]
+ if (record.options !== ctx.$options) {
+ record.options = ctx.$options
+ }
var instances = map[id].instances
if (ctx && instances.indexOf(ctx.parent) < 0) {
instances.push(ctx.parent)
}
return render(h, ctx)
}
all works as expected
v2.3.4
Just comand+c & comand-v in your terminal: (ctrl+c & ctrl+v / copy & past)
vue create -d -n vue-memory-leak-functional;
cd vue-memory-leak-functional;
yarn;
# create Functional.vue
echo "<script>
export default {
name: 'Functional',
functional: true,
render(createElement) {
return createElement('div', 'HelloWorld');
}
}
</script>" > src/components/Functional.vue
# create JustComponent.vue
echo "<template>
<div>
<functional v-for=\"i in 100\" :key=\"i\" />
</div>
</template>
<script>
import Functional from \"./Functional\";
export default {
name: 'JustComponent',
components: { Functional },
}
</script>" > src/components/JustComponent.vue
# update HelloWorld.vue
echo "<template>
<div>
<just-component v-if=\"show\" />
</div>
</template>
<script>
import JustComponent from \"./JustComponent\";
export default {
name: 'HelloWorld',
components: {JustComponent},
data() {
return {
show: true
}
},
created() {
setInterval(()=>{
this.show = \!this.show;
}, 1000);
},
}
</script>" > src/components/HelloWorld.vue
yarn serve;
after that open devtool > more tools > performance monitor
I'm trying to make quasar-framework and vuefire work together but my data gets cleared after each hot reload. Quasar-framework suggested to open an issue here. Is this something that can be fixed in your source code?
More info:
quasarframework/quasar#87
vuejs/vuefire#29
I happen to have a strange issue and I think it is related to 'npm run serve'.
I implemented two apps a and b, both of them get async data from a websocket and put them in a javascript object which is later used in vue (as a reactive property). I don't know what caused it but now app a is running as usual while app b is not updating the UI with the reactive data. I checked this multiple times. Both apps use the same dependencies and libraries, just visualize them differently.
When I then build App b and start it from a webserve it works like a charm again.
So i narrowed it down to 'npm run serve' and maybe to this plugin. Has anyone experiences something similiar?
'vue info' is giving me the following:
System:
OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
Binaries:
Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
Yarn: Not Found
npm: 8.1.0 - /usr/bin/npm
Browsers:
Chrome: 95.0.4638.69
Firefox: 94.0
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.2
@vue/babel-plugin-jsx: 1.1.1
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 4.5.15
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 4.5.15
@vue/cli-plugin-babel: ~4.5.15 => 4.5.15
@vue/cli-plugin-eslint: ~4.5.15 => 4.5.15
@vue/cli-plugin-router: ~4.5.15 => 4.5.15
@vue/cli-plugin-typescript: ~4.5.15 => 4.5.15
@vue/cli-plugin-unit-mocha: ~4.5.15 => 4.5.15
@vue/cli-plugin-vuex: 4.5.15
@vue/cli-service: ~4.5.15 => 4.5.15
@vue/cli-shared-utils: 4.5.15
@vue/component-compiler-utils: 3.2.2
@vue/eslint-config-standard: ^5.1.2 => 5.1.2
@vue/eslint-config-typescript: ^7.0.0 => 7.0.0
@vue/preload-webpack-plugin: 1.1.2
@vue/test-utils: ^1.0.3 => 1.2.2
@vue/web-component-wrapper: 1.3.0
eslint-plugin-vue: ^6.2.2 => 6.2.2
typescript: ^4.1.6 => 4.1.6
vue: ^2.6.14 => 2.6.14
vue-chartjs: ^3.5.1 => 3.5.1
vue-class-component: ^7.2.3 => 7.2.6
vue-cli-plugin-i18n: ~2.3.1 => 2.3.1
vue-cli-plugin-vuetify: ~2.4.3 => 2.4.3
vue-eslint-parser: 7.11.0
vue-hot-reload-api: 2.3.4
vue-i18n: ^8.26.7 => 8.26.7
vue-i18n-extract: 1.0.2
vue-loader: 15.9.8 (16.8.1)
vue-property-decorator: ^9.1.2 => 9.1.2
vue-router: ^3.2.0 => 3.5.2
vue-style-loader: 4.1.3
vue-template-compiler: ^2.6.11 => 2.6.14
vue-template-es2015-compiler: 1.9.1
vuetify: ^2.5.14 => 2.5.14
vuetify-loader: ^1.7.0 => 1.7.3
npmGlobalPackages:
@vue/cli: Not Found
Component A is defined in a .vue
file, and component B is defined in a .js
file that extends A. After changing the <script>
section of A, B is reloaded but it lost what is extended (for the example below, test()
will be gone).
import Vue from 'vue'
import component from './component'
export default Vue.extend({
extends: component,
methods: {
test () { // test will be lost!
alert('test!')
}
}
})
Component B is correctly reloaded.
https://github.com/hjkcai/vue-hot-reload-api-issue
Edit changeThis()
method or any part of the <script>
section in component.vue
. The console will show the error after hot reload.
I tried to step into vue-hot-reload-api
to find out this question. It seems that component A and B share the same entry in the map
object, which means they have the same data ID (data-v-xxxxxx
). After hot reload, the constructor of B is recreated with the options of A. Maybe that is why component B is reloaded without its own methods?
Using Vuejs 1.0.26 with webpack.
I have the vue hot reload installed:
"vue-hot-reload-api": "^2.0.6"
Then I start the webpack dev server, and able to view the page sing http://localhsot:8080:
webpack-dev-server --inline --hot
Page changes is not auto reload, I have to run webpack command to see the changes.
I saw many sample on the internet is using Vuejs 1, or this only work with Vujs 2?
Sample code:
export const foo = {
template: "",
data: () => ({
visible: false
}),
methods: {
toggle: function() {
this.visible = !this.visible;
}
}
};
<foo inline-template>
<div>
<button v-on:click="toggle"></button>
<div v-bind:class="{visible: visible}">
bar
</div>
</div>
</foo>
import { foo } from "./foo";
if (module.hot) {
const api = require("vue-hot-reload-api");
api.install(Vue);
if(!module.hot.data) {
api.createRecord("foo-id", foo);
} else {
api.reload("foo-id", foo);
}
module.hot.accept();
}
const app = new Vue({
el: "#app",
components: {
"foo": foo
}
});
After a hot reload the HTML bindings seem to be lost. The html is served from a server and bound on the client. Is there a way to make that work with hot reloading? I'm trying out a progressive enhancement approach.
Thank you in advance!
VueJS supports typescript but working with typescript we have to sacrifice HMR.
I was wondering if it was possible to make this API work with the VueComponent instead of the VueJS options. I don't understand VueJS internals enough to see if there is a solution here to create a loader that would allow me to add HMR to typescript files exporting VueComponent objects.
Here is my sample code where I try to use HMR directly.
import Vue from 'vue'
import { Component, prop } from 'vue-property-decorator'
import api from 'vue-hot-reload-api'
@Component({
template: `
<div>
<h1>Hello {{ name }}</h1>
<p>This component</p>
</div>`
})
export default class HelloWord extends Vue{
@prop(String)
name: String
greet () {
console.log('Welcome' + this.name)
}
}
// HMR for this specific component
if (module.hot) {
api.install(Vue)
if (!api.compatible) {
throw new Error('vue-hot-reload-api is not compatible with the version of Vue you are using.')
}
module.hot.accept()
if (!module.hot.data) {
api.createRecord('my-helloword-component', HelloWord) // HelloWord is a function VueComponent(){}
} else {
api.reload('my-helloword-component', HelloWord)
}
}
When the component is reloaded, I expect to keep the custom properties.
Can we add logic here: vue-hot-reload-api/blob/master/src/index.js#L91?
injectHook(options, initHookName, function() {
var record = map[id]
if (!record.Ctor) {
record.Ctor = this.constructor
}
+ // keep the custom properties example
+ if (!this.$ls && record?.instances?.length > 0 && record.instances[0].$ls) {
+ this.$ls = record.instances[0].$ls
+ }
record.instances.push(this)
})
Or have other schemes, please tell me.
https://github.com/Awea/issue-vue-hot-reload-api-mixins
Try comment/uncomment:
// src/mixins/my-mixin.vue#L20-22
foo(){
console.log('bar')
}
I expect that HelloWorld
component will have his data.internalData
set to 'Some stuff'
.
When a Mixin is updated the Component that use it lost his initial data
.
HMR
will succeed with webpack-dev-server
, but I get an error.
i upgrade vue-loader to "13.3.0",my project throw error(vuex options:{strict:true}):
[vuex] Do not mutate vuex store state outside mutation handlers.
it give me nothing useful info,so my only work is to recover the previous git version and analyze it.
my project work fine for long time,except updage package,i change nothing.
i analyze the vue-loader and its dependencies(vue-hot-reload-api,and so on),and replace with previous version,finally i find the [email protected] is the last work fine version.
i really do not know where my code cause this problem,so has no Reproduction Step.
i think it maybe relate to vue-router,because the error was throw after click menu,and because the error trace tell me it begin from vue-router.esm.js(function extracetGuard)
but i promise if i replace [email protected] to [email protected],all work fine.
and i also expect the vuex can throw more useful info to help me locate my problem
After the initial createRecord
call, a Ctor
will be created and cached without custom option merge strategies.
e.g. vuejs/vue#6609
Can we skip Vue.extend(options)
in createRecord
if there's a custom option/hook in mixins
?
I'm trying to get vue-hot-reload-api
working with SystemJS instead of Webpack. Currently if I call api.reload
, it doesn't seem to re-render the component, at least if only the render function has changed. Instead it only re-renders the parent, not the changed component. Is this correct? vue-loader
seems to only ever call reload
though.
Should I call both reload
and rerender
to make sure the component updates completely?
I'm modifying a component App
mounted like this:
new Vue({
el: '#app',
components: { App },
render: (h) => h('app')
});
When this API calls instance.$parent.$forceUpdate()
here, it seems to decide here that it got back the same vnode
as earlier and doesn't render it again.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.