创建一个实例

new Vue

<h1>创建一个实例</h1><pre>var vm = new Vue({//选项})</pre>

数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<hr><h1>数据与方法</h1><p>当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。</p><p id="app-1">data.a:{{ a }} "/{/{ b }/}/" b:undefined</p><script>// 我们的数据对象var data = { a: 1 };// 该对象被加入到一个 Vue 实例中var vm = new Vue({el:"#app-1",data: data});// 获得这个实例上的 property// 返回源数据中对应的字段console.log(vm.a === data.a); // => true// 设置 property 也会影响到原始数据vm.a = 2;console.log(data.a); // => 2// ……反之亦然data.a = 3;console.log(vm.a); // => 3vm.b = 'hi';console.log(vm.b === data.b); // => true// 设置 property 也会影响到原始数据vm.b = 'ni';console.log(data.b); // => undefined// ……反之亦然data.b = 'mi';console.log(vm.b); // => ni</script><p>只有当实例创建时就已经存在与data中的property才是响应式的,如果后面新添加的,则不是响应式的.</p>

阻止追踪

Object.freeze()阻止修改现有的 property，也意味着响应系统无法再追踪变化。

<h1>Object.freeze()阻止修改现有的 property，也意味着响应系统无法再追踪变化。</h1><div id="app"><p>{{ foo }}</p><!-- 这里的 `foo` 不会更新！ --><button v-on:click="fn">Change it</button></div><script>var obj = {foo: "bar"}Object.freeze(obj);new Vue({el: "#app",data: obj,methods: {fn: function () {obj.foo = "foo";}}});</script>

实例property和方法

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：

<h1>除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：</h1><div id="example"></div><script>var data = { a: 1 };var vm = new Vue({el: '#example',data: data});console.log(vm.$data === data);// => trueconsole.log(vm.$el === document.getElementById('example')); // => true// $watch 是一个实例方法vm.$watch('a', function (newValue, oldValue) {// 这个回调将在 `vm.a` 改变后调用console.log("example",newValue,oldValue);});//注意  如果实在监听前改变了值  是监听不到的vm.a = 2;console.log(vm.a);</script>

create钩子

created 钩子可以用来在一个实例被创建之后执行代码：
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。钩子和实例方法中不能使用箭头函数

<!--实例声明周期钩子--><script>new Vue({data: {a: 1},created: function () {// `this` 指向 vm 实例console.log('a is: ' + this.a);}});// => "a is: 1"</script>

生命周期图

vue3.Vue实例相关推荐

vue3 setup 怎么获取vue实例上的全局变量
在vue2中,我们定义在vue实例上的 vue.property.变量 ,在组件中都可以通过 this.变量名得到,那么到了vue3中,在setup中要获取全局变量就需要通过vue提供的方法了挂载全 ...
【01Vue3 安装】Vue3 安装引入 Vue.js创建Vue实例编写Vue应用程序在HTML中使用Vue应用程序
Vue3 安装在开始使用 Vue.js 3之前,需进行一些简单的设置和安装步骤.本教程将指导完成Vue3的安装过程. 步骤 1:引入 Vue.js 首先,在HTML文件中引入Vue.js库.可通过以 ...
光脚丫思考Vue3与实战：第03章 Vue实例
下面是本文的屏幕录像的在线视频: 03-Vue实例 04-生命周期示意图+钩子函数温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 03-Vue实例:https://pan.baid ...
vue2与vue3的实例销毁，有什么区别。
vue2的实例销毁: vm.$destroy() 完全销毁一个实例.清理它与其它实例的连接,解绑它的全部指令及事件监听器. 触发 beforeDestroy 和 destroyed 的钩子. vue3 ...
Vue实例的生命周期详解，从创建到销毁全过程
文章目录前言初识new Vue Vue实例从创建到销毁 1.创建之前-beforeCreate() 2.创建之后-created() 3.实例对象和文档挂载之前-beforeMount() 4.实 ...
vue实例没有挂载到html上,vue 源码学习 - 实例挂载
前言在学习vue源码之前需要先了解源码目录设计(了解各个模块的功能)丶Flow语法. src ├── compiler # 把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能. ├── ...
关于Vue实例的生命周期created和mounted的区别
关于作者程序开发人员,不拘泥于语言与技术,目前主要从事PHP和前端开发,使用Laravel和VueJs,App端使用Apicloud混合式开发.合适和够用是最完美的追求. 个人网站:http://w ...
Vue实例的生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...
创建第一个vue实例
一.vue安装与下载 1. 官网下载下载地址选择开发版本 2. 打开sublime,新建vue文件夹,将下载好的代码vue.js放入vue文件夹中. 3. 新建index.html文件,在hea ...
vue的js文件中获取vue实例
1.main.js导出vue实例: 1 var vue = new Vue({ 2 el: '#app', 3 router, 4 components: { App }, 5 template: ' ...

vue3.Vue实例

文章目录