Highcharts 教程
Highcharts 时间序列，可缩放的图表
以下实例演示了基于时间的曲线图表。
我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看个完整实例：
配置可缩放图表。
chart.zoomType 指定了用户可以拖放的尺寸，用户可以通过拖动鼠标来放大，可能值是x，y或xy：
var chart = {
zoomType: 'x'
plotOptions
使用 plotOptions 配置图表区域：
配置两个 Y 轴：
var plotOptions = {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
lineWidth: 1,
lineWidth: 1
threshold: null
plotOptions
plotOptions用于设置图表中的数据点相关属性。
var plotOptions = {
cursor: 'pointer',
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x)
+ ':&br/& ' + this.y + ' visits',
width: 200
lineWidth: 1
文件名：highcharts_line_time.htm
&meta charset="UTF-8" /&
&title&Highcharts 教程 | 菜鸟教程(runoob.com)&/title&
&script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&&/script&
&script src="http://code.highcharts.com/highcharts.js"&&/script&
&div id="container" style="width: 550 height: 400 margin: 0 auto"&&/div&
&script language="JavaScript"&
$(document).ready(function() {
var chart = {
zoomType: 'x'
var title = {
text: 'USD to EUR exchange rate from 2006 through 2008'
var subtitle = {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
var xAxis = {
type: 'datetime',
minRange: 14 * 24 * 3600000 // 14 天
var yAxis = {
text: 'Exchange rate'
var legend = {
enabled: false
var plotOptions = {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
lineWidth: 1,
lineWidth: 1
threshold: null
var series= [{
type: 'area',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(),
0.832, 0.8333,
0.2, 0.839, 0.84, 0., 0.3, 0.2,
0.838, 0.6, 0.8303,
0.824, 0.6, 0.9, 0.9, 0.3, 0.8273,
0.2, 0.824, 0.8, 0., 0.3, 0.8097,
0., 0.1, 0.7,
0.4, 0.1, 0.7, 0.8, 0.6,
0., 0.1, 0.1, 0.5, 0.5,
0.7, 0.5, 0.3, 0.6, 0.,
0.2, 0.1, 0.1, 0., 0.2,
0.3, 0.9, 0.9, 0.4, 0.,
0.2, 0.1, 0.1, 0.9, 0.9,
0.7, 0., 0.4, 0.9, 0.7,
0.799, 0., 0.8, 0.2, 0., 0.787,
0.8, 0.6, 0.5, 0., 0.777, 0.7772,
0.8, 0.2, 0.5, 0.7, 0.,
0., 0.5, 0.1, 0.782, 0.5, 0.7844,
0.782, 0.5, 0.6, 0.4, 0.3, 0.7808,
0., 0.3, 0.1, 0.1, 0.,
0.8, 0.6, 0.4, 0.6, 0.,
0.8, 0.3, 0.6, 0.785, 0.787, 0.1,
0.9, 0.6, 0.8, 0.5, 0.4,
0.7, 0.796, 0.8, 0.8, 0.797, 0.7,
0.2, 0., 0.6, 0., 0.7,
0.7, 0.5, 0.1, 0.779, 0., 0.7807,
0.7, 0.9, 0.1, 0.5, 0.1,
0.6, 0., 0.9, 0.75, 0.75, 0.5,
0.2, 0.7, 0.2, 0.755, 0.6, 0.7616,
0.8, 0.4, 0.757, 0.8, 0.762, 0.762, 0.7617,
0.5, 0.6, 0.758, 0.758, 0.758, 0.9, 0.7613,
0.3, 0.8, 0.8, 0.9, 0.1,
0.7, 0.4, 0., 0.7, 0.,
0., 0.5, 0.774, 0.3, 0.8, 0.7718,
0.8, 0.8, 0.1, 0.769, 0.769, 0.9,
0.3, 0.4, 0.7, 0.1, 0.5,
0.8, 0.3, 0.7, 0.2, 0.3,
0.5, 0.76, 0.7, 0.8, 0.5, 0.7562,
0.752, 0.2, 0., 0., 0.1, 0.7531,
0.8, 0.4, 0.75, 0.1, 0.4, 0.7492,
0.9, 0.7, 0.8, 0., 0.5,
0.8, 0.2, 0.8, 0.1, 0.2,
0.9, 0.7, 0.6, 0.9, 0.2,
0.736, 0.736, 0.735, 0.4, 0.3, 0.6, 0.7385,
0.6, 0.74, 0.6, 0.4, 0.1, 0.7438,
0.3, 0.4, 0.2, 0.744, 0.7, 0.7437,
0.3, 0.8, 0., 0.748, 0.749, 0.2,
0.2, 0.2, 0.5, 0.7, 0.7,
0., 0., 0.743, 0.8, 0.9, 0.7345,
0.5, 0.1, 0., 0.2, 0.5,
0.8, 0.7, 0.3, 0.5, 0.5,
0.2, 0.1, 0.7, 0.7, 0.5,
0.3, 0.2, 0.4, 0.727, 0.5, 0.7305,
0.8, 0.4, 0.4, 0.5, 0.4,
0.5, 0.5, 0.732, 0.6, 0.3, 0.734,
0.734, 0.1, 0.1, 0.6, 0.4, 0.7242,
0.7, 0., 0.721, 0.721, 0.9, 0.5,
0.9, 0.3, 0., 0.2, 0.9,
0.3, 0.7, 0.7, 0.8, 0.3,
0.705, 0.5, 0.1, 0.7, 0.7, 0.4,
0.6, 0.2, 0., 0.695, 0., 0.6922,
0.4, 0.1, 0., 0.3, 0.5,
0.7, 0.2, 0.7, 0.2, 0.2,
0.5, 0.2, 0.9, 0.1, 0.5,
0.6, 0.5, 0.9, 0.5, 0.6,
0.3, 0.8, 0.3, 0.4, 0.4,
0.6, 0., 0.8, 0.4, 0.4,
0.5, 0.1, 0.5, 0.7, 0.68, 0.6803,
0., 0.677, 0.677, 0.6, 0.1, 0.2,
0.7, 0.8, 0.8, 0.4, 0.9,
0.3, 0.8, 0., 0.678, 0.6, 0.6903,
0.6, 0.9, 0.2, 0.3, 0.2,
0.2, 0.8, 0.7, 0.3, 0.665, 0.6611,
0., 0.659, 0.8, 0.2, 0.4, 0.6514,
0., 0.4, 0.2, 0.1, 0.8,
0.8, 0.1, 0.8, 0.9, 0.3,
0., 0.3, 0.4, 0.6, 0.7,
0., 0.8, 0.2, 0.2, 0.8,
0.4, 0.7, 0.5, 0., 0.6,
0.3, 0.2, 0.6, 0.4, 0.9,
0.1, 0.8, 0., 0.2, 0.2,
0.4, 0.6, 0.635, 0.6, 0.6, 0.6379,
0.2, 0.1, 0., 0.9, 0.6,
0.634, 0., 0.7, 0.4, 0.1, 0.6451,
0.645, 0.4, 0.9, 0.1, 0.1, 0.6349,
0.4, 0.2, 0.632, 0., 0.8, 0.6383,
0.1, 0., 0.6, 0.4, 0.1,
0.631, 0.2, 0.4, 0.8, 0.8, 0.6368,
0.636, 0.637, 0.1, 0.7, 0.9, 0.8,
0.4, 0.6, 0.2, 0.8, 0.1,
0.4, 0.1, 0.5, 0.2, 0.5,
0., 0.7, 0.2, 0.2, 0.9,
0., 0.6, 0., 0.1, 0.6,
0.5, 0.8, 0.4, 0.8, 0.5,
0.6, 0.3, 0.8, 0.2, 0.6,
0.8, 0.7, 0.7, 0.6, 0.1,
0.2, 0.1, 0.9, 0.1, 0.6,
0.1, 0.3, 0., 0.2, 0.8,
0.9, 0.6, 0.8, 0.1, 0.7,
0.8, 0.8, 0.9, 0.9, 0.2,
0., 0.775, 0.2, 0.9, 0.9, 0.7879,
0.6, 0.5, 0.7, 0.761, 0.1, 0.7473,
0.8, 0.7, 0.1, 0.719, 0.6, 0.7158,
0.714, 0.9, 0.9, 0.7095
var json = {};
json.chart =
json.title =
json.subtitle =
json.legend =
json.xAxis = xA
json.yAxis = yA
json.series =
json.plotOptions = plotO
$('#container').highcharts(json);
以上实例输出结果为：
记住登录状态
重复输入密码添加时序约束的技巧分析 | 电子创新网赛灵思中文社区iOS webview加载时序和缓存问题总结 - lolDragon - 博客园
随笔 - 17, 文章 - 37, 评论 - 20, 引用 - 0
iOS webView的加载时序
UIWebView加载顺序：
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSLog(@"开始请求webview:%@",request.URL.relativeString);
return YES;
- (void)webViewDidStartLoad:(UIWebView *)webView {
NSLog(@"开始加载webview");
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"结束加载webview");
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nonnull NSError *)error {
　　 NSLog(@"webView加载失败");
加载的结果：
<span style="color: #17-<span style="color: #-<span style="color: # <span style="color: #:<span style="color: #:<span style="color: #.535 H5页面调试[<span style="color: #73:<span style="color: #0877] 开始请求webview:http://xxxx/index1.html
<span style="color: #17-<span style="color: #-<span style="color: # <span style="color: #:<span style="color: #:<span style="color: #.537 H5页面调试[<span style="color: #73:<span style="color: #0877] 开始加载webview
-----------------显示开始加载html CSS js 和图片资源等（JS引擎单线程顺序执行）---------------
<span style="color: #17-<span style="color: #-<span style="color: # <span style="color: #:<span style="color: #:<span style="color: #.069 H5页面调试[<span style="color: #73:<span style="color: #0877] 结束加载webview
&WKWebView加载时序:
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
NSLog(@"webview开始请求");
decisionHandler(WKNavigationActionPolicyAllow);
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
NSLog(@"webView开始加载");
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {
NSLog(@"webview开始收到响应");
decisionHandler(WKNavigationResponsePolicyAllow);
-----------------显示开始加载html CSS js 和图片资源等（JS引擎单线程顺序执行）---------------
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
NSLog(@"<span style="color: #");
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
NSLog(@"webview结束加载内容");
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error{
NSLog(@"webview加载失败");
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{
NSLog(@"开始重定向的函数");
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition, NSURLCredential *))completionHandler
NSLog(@"<span style="color: #");
completionHandler(NSURLSessionAuthChallengePerformDefaultHandling, nil);
iOS webView加载html5缓存
1.加载html5的过程
　　每次加载一个HTML5页面，都会有较多的请求。除了HTML主URL自身的请求外，HTML外部引用的JS、CSS、字体文件、图片都是一个独立的HTTP请求，每一个请求都串行的（可能有连接复用）。
2.设置清除html5页面缓存
　　html5端设置meta标签：
&meta http-equiv="Pragma" content="no-cache" /&&meta http-equiv="Cache-Control" content="no-cache" /&&meta http-equiv="Expires" content="0" /&
　　ios:设置加载的网络请求不采用本地缓存和远程缓存
　　PS:设置上面的只是紧紧可以保证html文件每次从服务器中获取，不从缓存文件中拿，而对于外联CSS JS图片等文件仍旧是从缓存中获取的；
3.设置css JS文件不从缓存中读取
　　通过添加版本号的和随机数的方法，保证每次加载JS CSS连接都是最新的，通常的做法是添加一个版本号，在每次更新了JS CSS时给版本号+1；保证没有更新时采用缓存文件
有更新可以从服务中获取；
1、随机数法
　　document.write( " &script src='test.js?rnd= " + Math.random() + " '&&/s " + " cript& " )
var js = document.createElement( " script " )
js.src = " test.js " + Math.random()
document.body.appendChild(js)
这样采用随机数的话， js文件将永远得不到缓存，每次都必须重新从服务器加载，即使没有任何更改。
大家如果经常上国外网站的话，可以看到他们通常采用这样的方式来解决：
&script src="test.js?ver=113"&&/script&
其中 ver=113 的 113就是版本号
这样真正做到了应该缓存的时候缓存静态文件，当版本有更新的时候从获取最新的版本，并更新缓存。
对于图像 &img src="test.jps?ver=版本号"& 来有效利用和更新缓存.
4.iOS清除缓存文件
- (void)removeWebCache{
if ([[UIDevice currentDevice].systemVersion floatValue] &= <span style="color: #.0) {
NSSet *websiteDataTypes= [NSSet setWithArray:@[
WKWebsiteDataTypeDiskCache,
//WKWebsiteDataTypeOfflineWebApplication
WKWebsiteDataTypeMemoryCache,
//WKWebsiteDataTypeLocal
WKWebsiteDataTypeCookies,
//WKWebsiteDataTypeSessionStorage,
//WKWebsiteDataTypeIndexedDBDatabases,
//WKWebsiteDataTypeWebSQLDatabases
// All kinds of data
//NSSet *websiteDataTypes = [WKWebsiteDataStore allWebsiteDataTypes];
NSDate *dateFrom = [NSDate dateWithTimeIntervalSince1970:<span style="color: #];
[[WKWebsiteDataStore defaultDataStore] removeDataOfTypes:websiteDataTypes modifiedSince:dateFrom completionHandler:^{
[[NSURLCache sharedURLCache] removeAllCachedResponses];
//先删除cookie
NSHTTPCookie *
NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
for (cookie in [storage cookies])
[storage deleteCookie:cookie];
NSString *libraryDir = [NSSearchPathForDirectoriesInDomains(NSLibraryDirectory, NSUserDomainMask, YES) objectAtIndex:<span style="color: #];
NSString *bundleId
[[[NSBundle mainBundle] infoDictionary]
objectForKey:@"CFBundleIdentifier"];
NSString *webkitFolderInLib = [NSString stringWithFormat:@"%@/WebKit",libraryDir];
NSString *webKitFolderInCaches = [NSString
stringWithFormat:@"%@/Caches/%@/WebKit",libraryDir,bundleId];
NSString *webKitFolderInCachesfs = [NSString
stringWithFormat:@"%@/Caches/%@/fsCachedData",libraryDir,bundleId];
/* iOS8.0 WebView Cache的存放路径 */
[[NSFileManager defaultManager] removeItemAtPath:webKitFolderInCaches error:&error];
[[NSFileManager defaultManager] removeItemAtPath:webkitFolderInLib error:nil];
/* iOS7.0 WebView Cache的存放路径 */
[[NSFileManager defaultManager] removeItemAtPath:webKitFolderInCachesfs error:&error];
NSString *cookiesFolderPath = [libraryDir stringByAppendingString:@"/Cookies"];
[[NSFileManager defaultManager] removeItemAtPath:cookiesFolderPath error:&error];
[[NSURLCache sharedURLCache] removeAllCachedResponses];
关于保存在沙盒中的缓存文件如下图：
5.针对UIWebView出现的内存泄漏方法（网上）
& &- (void)webViewDidFinishLoad:(UIWebView *)webView
& &{ & & & //防止内存泄漏
& & & &[[NSUserDefaults standardUserDefaults] setInteger:0 forKey:@"WebKitCacheModelPreferenceKey"]; & & & &//本地webkit硬盘图片的缓存；
& & & &[[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"WebKitDiskImageCacheEnabled"];
& &- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
& & & & &int cacheSizeMemory = 4*1024*1024
PS：经测试好像没什么卵用，先放在这里反正写了也没什么坏处
1.如果没有CDN缓存影响；每次杀死APP后重新进入，第一次加载webview，都会加载全部的数据资源（外联js,外联css，图片等）退出去后，如果在没有更新js,css内容时，默认只会加载html内容，PS:html中的内容 在每次加载webView中都会从服务器中更新一下；
2.如果js css后面都添加了版本号，那么在每次更新版本号时，或者说资源链接变化时，webView一定会重新加载新的内容；如下图
&script type="text/javascript" src="index1.js?v=1.0.0"&&/script&
1.经测试发现，JS CSS没有加版本号，更新JS CSS的内容有时候也会及时从服务器中更新获取，大多数时候又不会更新；不知道是不是跟web服务器的缓存策略有关，还是文件超期了？还是CDN缓存有关？&聊一聊Vue实例与生命周期运行机制
时间： 19:46:37
&&&& 阅读：605
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&Vue的实例是Vue框架的入口，担任MVVM中的ViewModel角色，所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，事件钩子可以辅助我们对整个实例生成、编译、挂载、销毁等过程进行js控制，给我们提供了执行自定义逻辑的机会。所以学习实例的生命周期，能帮助我们理解vue实例的运行机制，更好地利用钩子函数完成我们的业务代码。
生命周期概览
Vue提供的可以注册的钩子都在上图片的红色框标注。 它们分别是：
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。此时的数据观察和事件机制都未形成。
实例已经创建完成之后同步调用，此时实例已经结束解析选项。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调，此时this便指向vue实例。然而，挂载阶段还没开始，还没有开始DOM编译，$el 属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
接下来做一个例子，看一下所有的生命周期具体执行时序是怎么样的
1 &!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&Vue实例与生命周期&/title&
&script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"&&/script&
<span style="color: # &div id="app"&
<span style="color: #
&p&{{ message }}&/p&
<span style="color: # &/div&
<span style="color: #
<span style="color: # &script type="text/javascript"&
<span style="color: #
<span style="color: #
var app = new Vue({
<span style="color: #
el: ‘#app‘,
<span style="color: #
<span style="color: #
message : "Vue实例与生命周期"
<span style="color: #
<span style="color: #
beforeCreate: function () {
<span style="color: #
console.group(‘beforeCreate 创建前状态===============》‘);
<span style="color: #
console.log("%c%s", "color:red" , "el
: " + this.$el); //undefined
<span style="color: #
console.log("%c%s", "color:red","data
: " + this.$data); //undefined
<span style="color: #
console.log("%c%s", "color:red","message: " + this.message)
<span style="color: #
<span style="color: #
created: function () {
<span style="color: #
console.group(‘created 创建完毕状态===============》‘);
<span style="color: #
console.log("%c%s", "color:red","el
: " + this.$el); //undefined
<span style="color: #
console.log("%c%s", "color:red","data
: " + this.$data); //已被初始化
<span style="color: #
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
<span style="color: #
<span style="color: #
beforeMount: function () {
<span style="color: #
console.group(‘beforeMount 挂载前状态===============》‘);
<span style="color: #
console.log("%c%s", "color:red","el
: " + (this.$el)); //已被初始化
<span style="color: #
console.log(this.$el);
<span style="color: #
console.log("%c%s", "color:red","data
: " + this.$data); //已被初始化
<span style="color: #
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
<span style="color: #
<span style="color: #
mounted: function () {
<span style="color: #
console.group(‘mounted 挂载结束状态===============》‘);
<span style="color: #
console.log("%c%s", "color:red","el
: " + this.$el); //已被初始化
<span style="color: #
console.log(this.$el);
<span style="color: #
console.log("%c%s", "color:red","data
: " + this.$data); //已被初始化
<span style="color: #
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
<span style="color: #
<span style="color: #
beforeUpdate: function () {
<span style="color: #
console.group(‘beforeUpdate 更新前状态===============》‘);
<span style="color: #
console.log("%c%s", "color:red","el
: " + this.$el);
<span style="color: #
console.log(this.$el);
<span style="color: #
console.log("%c%s", "color:red","data
: " + this.$data);
<span style="color: #
console.log("%c%s", "color:red","message: " + this.message);
<span style="color: #
<span style="color: #
updated: function () {
<span style="color: #
console.group(‘updated 更新完成状态===============》‘);
<span style="color: #
console.log("%c%s", "color:red","el
: " + this.$el);
<span style="color: #
console.log(this.$el);
<span style="color: #
console.log("%c%s", "color:red","data
: " + this.$data);
<span style="color: #
console.log("%c%s", "color:red","message: " + this.message);
<span style="color: #
<span style="color: #
beforeDestroy: function () {
<span style="color: #
console.group(‘beforeDestroy 销毁前状态===============》‘);
<span style="color: #
console.log("%c%s", "color:red","el
: " + this.$el);
<span style="color: #
console.log(this.$el);
<span style="color: #
console.log("%c%s", "color:red","data
: " + this.$data);
<span style="color: #
console.log("%c%s", "color:red","message: " + this.message);
<span style="color: #
<span style="color: #
destroyed: function () {
<span style="color: #
console.group(‘destroyed 销毁完成状态===============》‘);
<span style="color: #
console.log("%c%s", "color:red","el
: " + this.$el);
<span style="color: #
console.log(this.$el);
<span style="color: #
console.log("%c%s", "color:red","data
: " + this.$data);
<span style="color: #
console.log("%c%s", "color:red","message: " + this.message)
<span style="color: #
<span style="color: #
<span style="color: # &/script&
<span style="color: # &/body&
<span style="color: # &/html&
运行代码，在chrome console查看构造信息
在console里面执行一下更新操作，data的值被修改后将会触发update操作。
执行实例销毁，将会触发destroy动作。如果后续依然想对实例进行其他操作，将会发现实例已经被销毁，操作不会成功。
从上面的代码和生命周期图解可以看到，Vue的实例封装很符合开发者的思维规范，生命周期非常清晰，是一款相当相当简洁强大优雅的框架，很值得我们研究学习使用。
好了，vue的生命周期就介绍到这儿，欢迎大家留言交流；喜欢或有帮助到您的话，点个赞或推荐支持一下，谢谢！标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文地址：http://www.cnblogs.com/johnvwan/p/6885616.html
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)