Learn how proxy properties work and their limitations.
- [Instructor] In this video,…we'll spend some time taking a closer look…at how Vue manages the data that we pass…to the constructor,…along with subsequent changes to that data…that necessitate re-rendering of the template.…When a Vue instance is first initialized,…the properties and the data object…are added to the instance…along with special getter and setter methods for each one.…When a getter is invoked,…it returns the value and also executes code…that makes it remember this property…and watch for subsequent changes to it.…
When a setter is invoked,…it sets a value and also triggers a re-render…if necessary.…Re-rendering involves updating Vue's virtual DOM,…which is a sort of model of the actual DOM…that can be updated much faster.…Once it's updated, it compares the new virtual DOM…to the previous version, or diffs it,…and then identifies the elements in the actual DOM…that need to reflect those changes.…Finally, it updates only those elements…in the most efficient way possible.…
Let's look at another simple Vue app in reactive.html,…
In this course, Michael Sullivan introduces the Vue framework, explains which problems it aims to solve, and shows how to add Vue to a new or existing webpage. Michael examines a Vue instance and its lifecycle, and shows simple and advanced data binding techniques along with how to manage CSS related attributes dynamically and handle user input and events. After he covers the key concepts and basic conventions of Vue, Michael dives into its component system, which can help you create modular, reusable code, and shows how to use the vue-router plugin to set up a single-page application with client-side routing.
- Creating a Vue app
- Applying control logic
- Binding to the style attribute and class attribute
- Reviewing the features of a Vue instance
- Registering and using Vue components
- Installing vue-cli and webpack
- Understanding the Vue app skeleton